在IE6中修复布局错误的策略？

Question

一般来说，解决IE6中布局错误的最佳方法是什么？在试图弄清楚为什么你的页面突然看起来像猴子编码时，应该寻找哪些最常见的错误或问题？

Answer 1

First Things First

获得Internet Explorer Developer Toolbar。这是一个节省生命，适用于IE6和/或IE7。它不是Web Developer Toolbar或Firebug for Firefox的替代品，但它总比没有好。

了解你的敌人

了解IE的怪癖 - 特别是hasLayout和overflow等。您还需要do without或alternatives找到许多CSS细节。查看有多少热门JavaScript toolkits / frameworks / libraries绕过不同的issues。

罗马不是一天建成的

你必须越多地使用它，你就会记得越多，不必经常查找。在这方面没有替代经验。不过有几位人士指出，网上有很多资源。 Position Is Everything肯定在那里。

Answer 2

http://www.positioniseverything.net/肯定会解决您的问题。

它提供了对浏览器错误的全面而深入的描述以及解决它们的选项。在我看来，必须阅读

Answer 3

开始了解IE如何破坏页面的一个好方法是使用CSS（border: 1px solid red;）打开不同元素上的红色边框。这将立即告诉您是否存在边距问题或填充问题，实际元素的宽度等等。

Answer 4

箱子模型通常是罪魁祸首。基本上这意味着你试图定位和使用不受支持的CSS的任何div都会导致这个问题。

如果你使用min- {width，height}或max- {width，height}，你可能会发现它。

这为检查不同版本的可兼容性提供了很好的参考。

http://www.aptana.com/reference/html/api/CSS.index.html

Answer 5

注意到Marc的帖子在-2 = D。他只是说“诉诸桌子”，即使他们受到打击，因为在像IE6这样的糟糕浏览器中，一些破碎的CSS命令只能在表格中工作（谁知道为什么......比如盖茨盖茨！）。这里有一个很好的参考，看看CSS有用但哪些无效。 http://www.quirksmode.org/css/contents.html。这是一个很好的参考，以检查哪些很酷的效果工作/不适用于各种广泛使用的浏览器。此外，对于使用IE6浏览的用户（即使它只是与机械污垢一样古老）总是有一个计划，因为许多企业仍然使用旧版浏览器（包括非盈利/第三世界国家等）所以一定要，创建一个比标准水平菜单看起来更好的错误输出下拉菜单，但创建一个专门用于IE6的辅助菜单，当页面收到来自IE6浏览器的请求时，它成为默认值。

Answer 6

你如何定义布局错误？ IE中最令人沮丧的布局实现（我不知道这应该被定义为bug）我们需要始终在HTML＆lt; form＆gt;中指定 style =“display：inline”。标记，以便空白行不会出现干扰表单布局。

Answer 7

我认为这个问题的范围太广了。

验证您的代码，如果疼痛持续存在，那么，祝您好运。

唯一真正的解决方案，就像任何其他类型的漏洞类型一样，谷歌寻求解决方案，或者问一个知道的人（例如：在stackoverflow给我们提供确切的问题）。

你可以使用IE Dev工具栏来收集一个想法，但许多错误是随机的，莫名其妙的，而且是深奥的。 IE：断头台bug，随机物品复制bug等等，列表继续，你可以花费数小时从字面上搞愚蠢的变量到处都没有实现。

Answer 8

我有一个简单的策略，每次都有效。

首先，我使用普遍接受的CSS开发网站，以便在Safari和Firefox 3中看起来很好。有关浏览器支持的详细信息，请参阅w3schools.com。

然后，我进入IE6和IE7并使用conditional includes改变CSS。

这是免费的，可以让你处理不同的浏览器（IE6和IE7有不同的问题）。

你会发现大多数问题都来自IE中不受支持的功能（如最小宽度），盒子模型中的错误（IE会在一些盒子中添加看不见的额外填充（3px））或定位问题。首先选择那些，因为它们通常是问题。

Answer 9

常见问题是填充没有添加到块元素的宽度。因此，对于布局div，请避免使用填充，而是使用其中的元素来定义填充。

Answer 10

当我需要调整IE / Standards浏览器之间的差异时，我使用Rafel Lima's Browser Selector。它大大减少了HTML中使用“黑客”来解决常见问题。

您可以针对不同的浏览器甚至不同版本的浏览器（Hello IE 6）定位CSS语句。它实现起来非常简单，但要求用户启用JavaScript（大部分都是）。

.thing {....}

.ie。{{}}

.ie6 .thing {....}

Answer 11

我们有一个浮动div问题，这个问题在IE6的特定版本中才会出现。通过下载最新的服务包来修复它。

Answer 12

理论上，使用与IE6布局错误兼容的CSS，只使用众所周知的变通方法（css和html过滤器）和代码，以不会破坏兼容性的方式，测试怪异/严格模式。

实际上，求助于表格。