0

そこで、動作するはずの非常に単純な 3 列のフッター レイアウトを作成しました。しかし、ブラウザごとに異なる結果が得られます。

CSS:

#footer{
width:980px;
height: 150px;
padding: 10px;
font-size: 12px;
background-color: #94171b;
color: #fff;
}

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{width:300px; text-align:left; border: 1px solid;}
#footer_right{float:right; width:300px; text-align:left; border: 1px solid;}

HTML

<div id="footer">
  <div id="footer_left">
    <b>SITE NAVIGATION</b><br>
        <a href="/dev/site/">Home</a><br>
        <a href="/dev/site/about.php">About</a><br>
        <a href="/dev/site/dining.php">Food</a><br>
        <a href="/dev/site/drinks.php">Drinks</a><br>
        <a href="/dev/site/">Contact</a>
      </div>
      <div id="footer_middle">
        <b>CONNECT WITH US SOCIALLY</b><br>
        http://www.facebook.com/tbd
        http://www.twitter.com/tbd
        http://www.instagram.com/tbd
        http://www.youtube.com/tbd
      </div>
      <div id="footer_right">
        &copy;2013 Site. All rights reserved<br><br>
        Support Local Business
      </div>
</div>

これが私がChromeで得たものです： クロムエラー

そして、これがIE9で得られるものです IE9 エラー

これと同じくらい単純で、（理論的には）機能するはずですが、機能しません。1 行にそれぞれ 300 ピクセルの 3 列が必要です。この時点で新鮮な目が必要です。ティア！

4

2 に答える 2

2

あなたの HTML ソリューションは、ブラウザーごとに常に異なる結果をもたらします。

現在の HTML と CSS を修正して、適切な 3 列のレイアウトにしました。float:leftすべての要素を追加しました。

jsFiddle は次のとおりです: http://jsfiddle.net/HhCYh/

より良い解決策:

個人的には、私自身の HTML 列レイアウトには、IE を含むすべてのブラウザーで驚くほど機能するこの HolyGrail 3 列レイアウトを使用しています。

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

見てください。ファイルに追加の HTML マークアップが必要ですが、Chrome と IE でクロスブラウザー ソリューションが必要な場合は、これが最適なソリューションです。

頑張れキル

于 2013-08-20T00:37:22.443 に答える
0

探していることを行うには、すべての div をフローティングにする必要があります。

これを試してみてください、それは私にとって jsfiddle でうまくいきます:

#footer_left{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_middle{float:left; width:300px; text-align:left; border: 1px solid;}
#footer_right{float:left; width:300px; text-align:left; border: 1px solid;}

あなたが持っていたものを考えると、Chromeはあなたが彼に表示するように頼んだことを正確に行っていましたが、IE9は理由もなく2番目のdivを真ん中に持っていました.

于 2013-08-20T00:33:44.463 に答える