1

我正在制作一个最终看起来像 ESPN 的底线的代码。

Internet Explorer（7、8 和 9）尊重我的 div 的宽度属性，但不尊重主 div 的居中。

虽然 WebKit（Safari 5 和 6，Chrome）和 Firefox 不尊重 div 的宽度，但确实将主 div 正确居中。我正在绞尽脑汁试图让 CSS 跨 Bowser 工作。

HTML

<div id="ticker">
    <div id="homeTeam">Team A</div>
    <div id="homeScore">1</div>
    <div id="awayTeam">Team B</div>        
    <div id="awayScore">2</div>
    <div id="remaining">Final</div>
</div>

CSS

#ticker {
    margin: auto;
    width: 778px;
    background-color: black;
    height: 28px;
    border-top-width: 3px;
    border-top-style: outset;
    border-top-color: #FFFFFF;
}

#homeScore {
    width: 60px;
    margin-left: -4px;
    padding-right: 10px;
    background-color: #79000a;
    font-size: 24px;
    color: white;
    display: inline;
    text-align: right;
}

#awayScore {
    width: 60px;
    margin-left: -4px;
    padding-right: 10px;
    background-color: #79000a;
    font-size: 24px;
    color: white;
    display: inline;
    text-align: right;
}

#homeTeam {
    width: 270px;
    padding-left: 10px;
    background-color: #7c000e;
    font-size: 24px;
    color: white;
    display: inline;
}

#awayTeam {
    margin-left: 25px;
    width: 270px;
    padding-left: 10px;
    background-color: #7c000e;
    font-size: 24px;
    color: white;
    display: inline;
}

#remaining {
    width: 76px;
    background-color: black;
    margin-left: 25px;
    font-size: 20px;
    color: white;
    display: inline;
    text-align: left;
}
4

1 回答 1

4

问题是您将显示属性设置为inline. IE 错误地尊重内联元素的 width 属性，而其他的则遵循 web 标准并且不遵守。

你可以：

1)inline改为inline-block

或者

2）将它们更改为block并使用该float属性。

Here is an explanation how to get inline-block to work in IE7 http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

于 2012-08-02T15:48:50.307 回答