jQuery倒数计时器部分隐藏答案

【问题标题】：jQuery countdown timer partially hiddenjQuery倒数计时器部分隐藏
【发布时间】：2013-12-02 01:43:14
【问题描述】：

我正在使用这个 jQuery 倒计时计时器，它在大多数情况下运行良好，但我无法弄清楚为什么正在倒计时的部分数字被部分隐藏。

http://techtraininghall.com/home-sound-systems-buying-guide-for-homeowners/

它不像他们演示中的那样流畅 http://www.littlewebthings.com/projects/countdown/example/?style=light

我认为它与溢出有关，因为它倒计时，但我不能确定。任何想法都非常感谢。

【问题讨论】：

你能在 jfiddle.net 上发布一个独立的代码来倒计时吗？

标签： javascript jquery css jquery-plugins

【解决方案1】：

在主题的样式表中：

http://techtraininghall.com/wp-content/themes/minimum/style.css?ver=2.0.1

有一组元素的line-height定义：

/* Defaults
------------------------------------------------------------ */

body,
h1,
h2,
h2 a,
h2 a:visited,
h3,
h4,
h5,
h6,
p,
input,
select,
textarea {
    color: #555;
    font-family: 'Droid Serif', arial, serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

这限制了默认的line-height:22px，这是您问题的根本原因。

要修复它，您可以在此页面中修改自定义样式：

<style id="spp-countd-header-css">
    .dash .digit {margin-top: 40px;} #spp_countd_panel {display: inline-block; height: 1%;}
</style>

到：

<style id="spp-countd-header-css">
    .dash .digit {margin-top: 12px; line-height: 55pt; } 
    #spp_countd_panel {display: inline-block; height: 1%;}
</style>

【讨论】：

那是完美的。谢谢！