为什么页面显示不同的IE和谷歌浏览器



某些页面通常在IE中显示得很糟糕,解决这些问题的最佳方法是什么?

您忘记添加doctype,所以您的页面处于Quirks模式

添加这个(HTML5 doctype)作为第一行:

<!DOCTYPE html>

,它应该看起来更好。

虽然,手动更改文档模式(使用开发人员工具;按下F12),看起来还是不对。这个页面显然还有其他问题。


最相关的问题(在转义了Quirks模式之后)是:

<body style="margin: 0; padding; 0;background-color: 4DA2CA;">

Internet Explorer没有显示任何背景颜色,因为您在颜色之前忘记了#。(你有padding; 0,用;代替:)

<body style="margin: 0; padding: 0; background-color: #4DA2CA">

但是你不应该首先使用内联样式…

这样会更好:

<body>

与CSS 在您的样式表:

body {
    margin: 0;
    padding: 0;
    background-color: #4DA2CA
}

你的意思是在IE中div 's更小。这是因为在IE css边界,边距包括在宽度声明。所以,如果你给div的宽度为100px,两边的边距为10px,那么在IE中这个div的实际可见宽度将是100-10-10=80px。为了解决这个问题,你可以使用子css声明。考虑到我们的例子,如果你想在两个浏览器中显示这个div宽度为100px,请执行以下操作

    .mydiv{       /*This deceleration will be understood by all the browsers*/
     margin:10px;
     width:120px;       
    }
    html>body .mydiv{  /*This deceleration will not be understood by IE browsers so other will override the width*/
     width:100px;          
    }

使用这个你可以统一你的div在IE和非IE浏览器的宽度

与其指出每个元素在IE中呈现方式不同的原因,我强烈建议不要每次创建一个新的页面元素时都重新发明轮子。

即使在抱怨标准的现代浏览器中,CSS也可能非常不可预测,因此最好使用来自可信来源(如

)的防弹代码片段。

CSS遗失手册

CSS权威指南

CSS食谱

从HTML/CSS的工作块开始,根据你的喜好修改它们,然后在那里进行跨浏览器测试。

相关内容

  • 没有找到相关文章

最新更新