Question

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

Internet Explorer（7,8和9）尊重我的div上的width属性，但不尊重主div的居中。

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

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;
}

Answer 1

问题是您要将显示属性设置为inline。 IE错误地尊重内联元素的宽度属性，而其他元素遵循Web标准而不是。

你可以：

1）将inline更改为inline-block

或

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

以下是如何让inline-block在IE7 http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

中运行的说明

CSS在WebKit和IE中没有按预期工作

1 个答案: