为什么 IE 中的页面显示与 google chrome 不同？答案

【问题标题】：why does the page display differently in IE than google chrome?为什么 IE 中的页面显示与 google chrome 不同？
【发布时间】：2018-06-27 02:58:30
【问题描述】：

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

【问题讨论】：

标签： html css blueprint-css

【解决方案1】：

您忘记添加a doctype，所以您的页面位于Quirks Mode。

添加这个（HTML5 doctype）作为第一行：

<!DOCTYPE html>

它应该看起来更好。

尽管手动更改文档模式（使用开发者工具；按 F12），但它看起来仍然不正确。页面显然还有其他问题。

最相关的问题（逃离怪癖模式后）是这样的：

<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
}

【讨论】：

即使使用 Doctype，它仍然看起来很糟糕，仅供参考。（虽然这确实部分解决了它。）

【解决方案2】：

您的意思是，在 IE 中，Div 更小。那是因为在 IE css 边框中，边距包含在声明的宽度中。所以，如果您给 div 宽度指定了 100px 和两边的边距为 10px，那么在 IE 中此 div 的实际可见宽度将为 100-10-10=80px。要解决此问题，您可以使用子 css decleration。考虑我们的示例，如果您想在两个浏览器中显示此 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;          
    }

使用它，您可以在 IE 和非 ie 浏览器中统一 Div 的宽度

【讨论】：

（只是让您知道，该页面正在实时编辑。自从问题发布以来，它已根据我的回答进行了修复。）

【解决方案3】：

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

即使在现代标准兼容浏览器中，CSS 也可能非常难以预测，因此最好使用来自受信任来源的代码的防弹 sn-ps，例如

CSS the Missing Manual

CSS the Definitive Guide

CSS Cookbook

从 HTML/CSS 的工作块开始，然后根据自己的喜好修改它们并从那里测试跨浏览器。整个过程不会那么令人沮丧。

【讨论】：