Question

我现在正在开发我的网站并且正在考虑将FireFox作为主要测试区域，但是当我在Chrome和IE9上测试时，结果却不同。在Chrome上，一旦我打开页面，其中一个图层就不会坐在它的位置，但是一旦我刷新它就完全符合我想要的位置。奇怪？在IE上，其中一个div（左边的一个）似乎有一个更高的边距，使得它离其他div太远而且字体不同，这使得一些单词更大并且不适合边框。让我的父亲在所有浏览器上看起来都很好以及我认为哪个浏览器应该考虑我的主要测试区域的最佳想法是什么。

P.S：为什么人们会为我的问题投票？我们都在学习。

Answer 1

没有看到代码无法准确说出来，但你在开发时错过了最佳实践。你应该在IE和其他浏览器范围内进行开发时检查一边，然后你可以在上升时修复它们。

检查您的文档类型。
重新设置元素
识别IE盒型号问题。

Answer 2

首先，

您应该在css中使用重置/规范化脚本。一个好的是Eric Meyers's。

在样式表的开头加上这个。

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
   License: none (public domain)
*/

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, 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, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0; 
}

Answer 3

你应该使用类似样板的东西来启动每个项目或只是使用一些css重置。

这样可以修复浏览器（填充，边距等）的微小差异。

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, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
...

更多信息：http://meyerweb.com/eric/tools/css/reset/

关于浏览器，您应该在最重要的浏览器上进行测试...从长远来看（每周一周），我会在一些次要的相关浏览器中进行测试，以确保其工作正常。

为什么我的网站在其他浏览器上看起来不太好？

3 个答案: