IE7与IE8，Firefox，Chrome和Safari中的浮动DIV
[英]Floating DIVs in IE7 vs. IE8, Firefox, Chrome and Safari
问题描述
I'm a bit stumped on this one. 
我对此有些困惑。 I am referring to this page - http://savitarbernese.com/welcome.aspx . 我指的是此页面-http://savitarbernese.com/welcome.aspx 。 At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. 目前在IE7上看起来还可以，但我似乎无法在其他浏览器上使用它。 As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. 现在，我不得不在表中包装几个DIV，以使背景延伸到整个内容的后面。 I'm guessing this has something to do with the div overflow? 我猜这与div溢出有关吗？ I'm not sure... 我不确定...
What's the best practice for cross-browser compatibility when using DIVs? 使用DIV时，跨浏览器兼容性的最佳实践是什么？
Cheers, D. 干杯D.
5 个解决方案
解决方案1
1 已采纳 2009-09-29 00:19:14
Add 加
overflow: hidden;
to #container and to #content in your css and presto! 在您的CSS和Presto中＃容器和＃内容！
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating. 该指令告诉浏览器将父div的高度扩展到内部div，即使它们是浮动的。
解决方案2
0 2009-09-28 23:00:36
What's the best practice for cross-browser compatibility when using DIVs?
Allways code for firefox first, then for IE. 始终先为firefox编码，然后再为IE编码。
解决方案3
0 2009-09-28 23:09:55
You are starting in the wrong end. 您的起点错误。 If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either. 如果您为IE7构建它，则在其他任何浏览器中它的外观都几乎不会相同，而在IE8中也是如此。
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. 首先，确保它在符合标准的浏览器（例如Firefox）中看起来正确，然后在所有其他符合标准的浏览器中几乎始终保持相同外观，除了IE7和更早版本外，几乎所有其他浏览器都一样。 IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. IE8仍然存在一些渲染问题，但与IE7相比，它更接近于兼容。 You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around. 您将不得不对该页面进行一些调整，以使其在IE7中也看起来相同，但这比尝试使其在其他方面起作用要少得多。
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. 首先，您应该确保页面上具有适当的doctype ，以使其不会以怪癖模式呈现。 That helps a lot when you want it to render the same across browsers. 当您希望它在浏览器之间呈现相同效果时，这很有帮助。
解决方案4
0 2009-09-28 23:27:50
What's the best practice for cross-browser compatibility ...?
Start by making sure your HTML validates. 首先确保您的HTML验证。
解决方案5
0 2009-09-29 00:07:20
Thanks - that's a fair comment. 谢谢-这是一个公平的评论。 My dev machine is down and I only had access to IE7 at the time. 我的开发机关闭了，当时我只能访问IE7。 Normally I would definitely start off with Firefox 3.5 and go from there. 通常，我肯定会从Firefox 3.5开始并从那里开始。
That aside, it's a small problem that is hampering me at the moment. 除此之外，这是一个阻碍我的小问题。 In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. 在FF3.5，Safari和IE8中，内容面板的背景不会像在IE7中那样向下扩展内容的整个高度。 I have changed the doctype to use XHTML 1.0 Strict 我已将文档类型更改为使用XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here? 我在这里错过了明显的事情吗？
Thanks again. 再次感谢。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.