0

So I've written a very simple 3 column footer layout that SHOULD work. But I'm getting different results in different browsers.

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

The 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>

Here's what I get in Chrome: Chrome Error

And here's what I get in IE9 IE9 Error

With as simple as this is, it should work (in theory) but it doesn't. There should be 3 columns of 300px each in a single row. Need a fresh set of eyes at this point. TIA!

4

2 回答 2

2

您的 HTML 解决方案总是会在不同的浏览器中给出不同的结果。

我修复了您当前的 HTML 和 CSS 以提供适当的 3 列布局。我添加float:left到所有元素。

这是 jsFiddle：http: //jsfiddle.net/HhCYh/

更好的解决方案：

对于我自己的 HTML 列布局，我个人使用了这个 HolyGrail 3 - 列布局，即使在 IE 中，它在所有浏览器中都表现出色。

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 无缘无故地把你的第二个 div 放在了中间。

于 2013-08-20T00:33:44.463 回答