Question

出于某种原因，在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;
}

Answer 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

Answer 2

您还可以将以下内容添加到重置代码的顶部：

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

}

此外，您使用的容器宽度为100％。确保你周围有某种容器元素，并用某种单元固定;即px，em等。没有它，每个浏览器将根据字体调整框的大小。每个浏览器和平台都会渲染字体略有不同，导致宽度不同。

Answer 3

这可能是怪癖模式的问题。你有合适的doctype吗？

将类似内容添加到您的CSS中进行调试。可能有一个被遗忘的元素或其他东西。

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

CSS Internet Explorer浏览器差异

3 个答案: