1

最終的に 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;
}
4

1 に答える 1

4

問題は、表示プロパティを に設定していることinlineです。IE はインライン要素の width プロパティを誤って尊重しますが、他の要素は Web 標準に従っていて、そうではありません。

あなたはできる：

1)inlineに変更inline-block

また

2) プロパティに変更してblock使用しfloatます。

inline-blockIE7 http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/で作業する方法について説明します。

于 2012-08-02T15:48:50.307 に答える