CSS Internet Explorer 浏览器差异答案

【问题标题】：CSS Internet Explorer Browser DifferencesCSS Internet Explorer 浏览器差异
【发布时间】：2014-04-12 02:21:24
【问题描述】：

由于某种原因，在 Internet Explorer 中，单词的缩进比在 Chrome 或 Safari 中显示的要远得多。这可能是由于各种浏览器的 CSS 差异造成的吗？

<div class="container">
<div class="centered">
<?php 

    echo "<a href='/LOGO'>LOGO</a>";
?>
</div>
</div>

//CSS

.centered
{
position:relative;
margin:0 auto;
width: 954px;   
}
.container
{
width:100%;
border-bottom: 1px solid gray;
font-size: 27px;
background: #4D94DB;
color: black;
    min-height: 37px;
}

【问题讨论】：

如果我不得不猜测，那是因为你没有重置全局样式。每个浏览器都有自己的默认值。

标签： php html css internet-explorer browser

【解决方案1】：

在第一行使用这个 css reset：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

参考Reset CSS

【讨论】：

最好在您的答案中包含参考链接。不过我会为你做的：meyerweb.com/eric/tools/css/reset

【解决方案2】：

您可能还想在重置代码的顶部添加以下内容：

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

另外，您使用的容器宽度为 100%。确保您周围有某种容器元素，并带有某种固定的单位；即 px、em 等。没有这些，每个浏览器都会根据字体调整框的大小。每个浏览器和平台都会渲染字体略有不同，从而导致宽度不同。

【讨论】：

【解决方案3】：

这可能是怪癖模式的问题。你有合适的文档类型吗？

将这样的内容添加到您的 CSS 以进行调试。可能有被遗忘的元素之类的。

html { border: solid 1px black;}
body { border: solid 1px red;}
div  { border: solid 1px green;}

【讨论】：