跨度浮动在Safari中不起作用?

时间:2012-12-16 05:47:32

标签: html css css3 safari css-float

我创建了这个倒计时(code here),由于某种原因,数字似乎在Safari中向下,而不是从左到右。

跨度不是太宽或任何东西,(width: 150px;)所以我不知道为什么会发生这种情况。

有谁知道导致这种情况的原因或如何解决?

我已经在Chrome和Firefox中测试了它,它工作正常,但我不知道IE。

1 个答案:

答案 0 :(得分:3)

只需从display: table;移除.nums,然后从display: table-cell;移除.nums span

Demo

CSS

@font-face {
    font-family: 'Quicksand Book';
    src: url('http://donutdev.com/fonts/Quicksand_Book.otf');
}

#headr {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 50px;
}

#countdown {
    width: 600px;
    height: 166px;
    background-color: #212121;
    border-radius: 7px;
    display: none;
}

.nums {
    float: left;
    width: 150px;
    padding-top: 20px;
    height: 90px;
    text-align: center;
    font-family: 'Quicksand Book', sans-serif;
    font-size: 50px;
}

.nums span {
    vertical-align: middle;
    color: #dcdcdc;
}

.text {
    float: left;
    width: 150px;
    padding-bottom: 20px;
    text-align: center;
    font-family: 'Verdana', sans-serif;
    font-size: 25px;
    color: #dcdcdc;
}