如何解决浏览器兼容性问题

Question

我创建了一个供我个人使用的网站。我正在使用Mozilla Firefox。但是当我搬到IE7时，整个网站都丢失了。结构和所有的路线都没有了。所以请帮我解决这个问题。

Answer 1

浏览器在实现布局和CSS方面存在许多差异，最显着的原因是most versions of Internet Explorer implement CSS badly。您必须为此处的人员提供更具体的详细信息，以便能够为您提供更多帮助，但一种可能的方法是use different stylesheets on IE from other browsers。需要警告的是，这是一个复杂的领域，甚至在IE版本之间也存在重大差异！

Answer 2

指定浏览器特定的样式表是一种解决方案，但我真的不喜欢它，因为它可能不可靠，难以管理。

您的最佳解决方案是在开发过程中在所有浏览器中进行测试，并确保在移到下一个设计元素之前，所有浏览器中的所有内容都应该如此。

经验和反复试验是不幸的唯一方法。

Answer 3

我通常会在“当前/最新”版本中打开最少5种不同的浏览器（Internet Explorer，Firefox，Google Chrome，Apple Safari和Opera） - 有时我也会倒退一个版本 - 尤其是Internet Explorer作为他们的标准像风一样的变化。 :-)

我建立了一个遵循W3C http://www.w3.org/标准（X）HTML的网站，并使其能够在Chrome和Internet Explorer中使用CSS和XHTML，然后完成大部分工作。

我花了很少的时间“摆弄”最后的浏览器，因为它们或多或少都遵循相同的规格。其次谷歌浏览器和Firefox非常适合调试奇怪的CSS/HTML错误。

根据浏览器类型，我从不在浏览器中限制CSS，不使用“clearfix hacks”或任何特殊样式表。

，但如果我的网站会在某些其他硬件平台协同工作，如移动电话，我可能会做第二个样式或者只是生成整个网站与其他结构上的另一个网址，如：http://m.example.com/

为了帮助你使网站的工作，我宁愿说：

1.）什么是你目前的问题与HTML/CSS？你在哪里做出了一些错误的决定，并且不能修复这些问题？

2.）重新构建已知W3C标准的网站，并检查新的布局和导航是否与Internet Explorer（最低7）和最新的Google Chrome兼容，那么您已经覆盖了大部分标准。

3）学习时使用display:block;在CSS http://www.w3schools.com/css/pr_class_display.asp

4）永远不要在同一个CSS类混合使用空白和边距宽度/高度设置，这将使一些旧的浏览器弄乱你的设计。而这可能是你的设计崩溃的主要原因。

最后...总是记得给我们提供一些关于你的问题的文档，这样我们可以检查它是否真的知道解决方案...换句话说，问题在哪里？给我们看一看....

这是否有用，请标记为您的答案。由于

Answer 4

http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html

Answer 5

找出打破你的代码，并在这种无聊的HTML解决它的if语句，这将是我的建议。

如果您的网站根本不显示，您可以简单地在if语句中编写整个新页面。

可悲的是，这些if语句仅支持IE变体，而不适用于Chrome，Firefox，Opera，Safari或其他。

<p><!--[if IE]> 
    According to the conditional comment this is Internet Explorer<br /> 
    <![endif]--> 
    <!--[if IE 5]> 
    According to the conditional comment this is Internet Explorer 5<br /> 
    <![endif]--> 
    <!--[if IE 5.0]> 
    According to the conditional comment this is Internet Explorer 5.0<br /> 
    <![endif]--> 
    <!--[if IE 5.5]> 
    According to the conditional comment this is Internet Explorer 5.5<br /> 
    <![endif]--> 
    <!--[if IE 6]> 
    According to the conditional comment this is Internet Explorer 6<br /> 
    <![endif]--> 
    <!--[if IE 7]> 
    According to the conditional comment this is Internet Explorer 7<br /> 
    <![endif]--> 
    <!--[if gte IE 5]> 
    According to the conditional comment this is Internet Explorer 5 and up<br /> 
    <![endif]--> 
    <!--[if lt IE 6]> 
    According to the conditional comment this is Internet Explorer lower than 6<br /> 
    <![endif]--> 
    <!--[if lte IE 5.5]> 
    According to the conditional comment this is Internet Explorer lower or equal to 5.5<br /> 
    <![endif]--> 
    <!--[if gt IE 6]> 
    According to the conditional comment this is Internet Explorer greater than 6<br /> 
    <![endif]--> 
    </p>