网页在Firefox中看起来不错,但其他浏览器都讨厌它

时间:2010-04-02 09:06:23

标签: html css xhtml

我正在努力创建自己的网站,而且它很顺利。在打开并且工作得非常好的时候,Firefox看起来很漂亮。但后来我在任何其他浏览器中运行它并不起作用。我怎样才能解决这个问题? Interner Explorer尤其讨厌它= [

你只需要知道我在说什么,所以这里是链接:

http://opentech.durhamcollege.ca/~intn2201/brittains/chatter/

请提供不涉及JavaScript的解决方案。

8 个答案:

答案 0 :(得分:5)

渲染Firefox和Internet Explorer之间的差异实际上是每个设计网页的人的日常交易。

您应该开始确定哪些元素确切地导致问题,然后制定一个关于这个问题的问题。 (或进行Google搜索,所有这些不兼容性以及如何解决这些问题都会以某种形式记录在网络上。)

另外,我建议您下载像IETester这样的工具,并查看网站失败的IE版本。在IE8中看起来相当不错,但内联框架在7中看起来很糟糕。

然后,确保您的网页为valid。 (它可能不应该是XHTML,但是有一个HTML doctype。)这不符合某些规则,但是因为验证捕获了很多错误,比如未关闭的标记会搞砸渲染。现在情况并非如此,但我仍然建议你这样做。

从长远来看,这些工具将非常有用:

  • Firebug in Firefox(右键点击页面上的任何元素,然后选择“检查元素...”,它会为您提供大量有用的信息

  • Web Developer Toolbar in IE8(按F12将其打开)与Firebug类似,如果没有那么强大。

答案 1 :(得分:2)

好的,我看了一下IE6中的页面。

一些提示。

  1. 尽量避免使用表格进行布局。我承认,在“欢迎”区域周围放置花哨的边框,使用表格比其他任何方式更容易 ,但其他表格完全没必要,并且是您的大部分问题的原因,因为浏览器,特别是IE6和IE7在决定如何布局时喜欢做自己的事情。

  2. 正如bobince所说,table-layout:fixed on signupTable1将有很大帮助

  3. 此外,对于IE6,给予包含“欢迎”的td 100%的高度有帮助。

  4. signupTable1中单元格中项目的边距宽度是FF中单元格宽度的百分比,但是IE6中屏幕宽度的百分比。你应该添加一些IE6目标css来弥补这一点。

  5. 最后,据我所知,您的标记是完美无瑕的多语言HTML / XHTML,并将其作为text / html提供,使用XHTML doctype不会导致任何问题。

答案 2 :(得分:0)

在Firefox 3.6.2中与在Internet Explorer 8中看起来相同。但旧版浏览器是邪恶的: 在网上搜索Internet Explorer +边距,因为那是Internet Explorer失败的地方。

简单技巧:不要使用保证金。

position:absolute;
top: 80%
left: 100px;

然后......谷歌特定的东西:)

答案 3 :(得分:0)

您的页面声明了XHTML doctype,但它无效XHTML:

http://validator.w3.org/check?uri=http%3A%2F%2Fopentech.durhamcollege.ca%2F~intn2201%2Fbrittains%2Fchatter%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

此外,它返回的内容类型标题为“text / html”,对于应该是XHTML的内容,错误。不幸的是,the correct content type will not work either

所以你需要做两件事:

  • 不要使用XHTML
  • 进行HTML验证

然后您可以开始考虑实际的浏览器不兼容性。

答案 4 :(得分:0)

好的,我修复了2个错误,最后想出来了

改变

#loginForm {

    float: right;

}

#loginTable {

    margin: 20%;
    margin-top: 14%;

}

#loginForm {

    float: right;
    margin-right: 5%;
    margin-top: 2.5%;

}

#loginTable {



}

并添加了

<!--[if lte IE 7]>
    <style type = "text/css">
        #loginForm{margin-top:-157px}
    </style>
<![endif]-->

不是我喜欢的解决方案,而是我必须处理的解决方案。

好的还有问题,我听说有100%的高度问题,我的水平边框不会保持正确的宽度。

答案 5 :(得分:0)

首先,让你的HTML和CSS验证:

然后,如果您的有效代码在特定浏览器中仍然失败,请使用浏览器的调试/检查工具找到有问题的HTML元素:

只要您使用有效的CSS 2.1,现代浏览器之间的差异应该是最小的或几乎不存在。是的,现代浏览器在实现标准方面做得非常好,特别是如果你避免使用前沿尚未完全标准化的技术(CSS3,HTML5)。 (我们原谅并将IE8视为“现代”,尽管它只支持CSS 2.1,PNG问题,JS速度慢等等。)

哦,有一点与有效性无关:永远记住许多UI元素(字体,按钮等)在不同的浏览器/平台中以完全相同的大小呈现。由于移动浏览的普及,屏幕尺寸也可能很大程度上变化。这就是为什么你应该更喜欢弹性/流体布局而不依赖于像素完美的渲染。

大多数IE 6/7错误都是the same old common ones repeating,并且有很多resources about fixing them。为IE创建单独的样式表,并使用conditional comments包含它们。

作为最后的评论,只要使用开放标准/技术,我个人就不在乎支持十年前的浏览器,除了graceful degration的形式,除非我为此付出慷慨。浏览器可以自由升级,没有理由不这样做。没有理由。世界不是静止的,显示必须继续,你不会看到你的旧电视电视等高清。

我还认为,作为网络开发人员,我们有责任强迫大众采用新的(开放)技术,因为它们可以节省大量的时间,有可能创造更好的最终用户体验等等。好处是无止境的。再次与其他行业进行比较:消费电子公司不断推出新产品,尽管大多数人都乐于使用20年的技术,除非被迫升级他们的(自然保守的)心态。

答案 6 :(得分:0)

“欢迎”框周围的混乱边框和不稳定的居中是因为您正在使用“自动布局”表格进行页面布局。这让你受到自动表格布局算法的支配,这种算法很复杂,不可靠,在IE中有点破碎。

对于必须将表格用于比简单数据更复杂的表格的地方,请在table-layout: fixed上设置<table>,并在width的第一行添加显式<td>样式} s,或者在表格内的<col/>元素上。您没有width样式的列将共享它们之间的剩余备用宽度。在包含固定大小图像的行上设置显式高度,以阻止它们共享表高度。

但是,对于主页面布局,使用CSS定位或浮动而不是表格会更好地 。您可以使用嵌套的div(每个都具有单独的背景图像)来实现图像边框效果,而无需使用表格。

答案 7 :(得分:0)

如果我是你,我不会试图让网站为IE 6这样的古老浏览器工作。

事实上,如果你让你的网站拒绝与IE6一起工作,你可能会争辩说你会帮助世界。任何可以帮助推动IE6进入坟墓的东西都是一件好事。

如果Google可以说不再支持IE6,那么你也可以。

现在,如果您将此网站建设为赚钱活动,并且人口统计中包含了相当大比例的IE6用户,那么支持古老的非标准兼容浏览器的痛苦可能是值得的。但除此之外,我会说它不是。