-6

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

PS：为什么人们对我的问题投反对票？我们都在学习。

4

3 回答 3

0

您应该使用样板文件之类的东西来启动每个项目，或者只使用一些 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/

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

于 2013-05-20T09:57:30.793 回答
0

首先，

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

在样式表的开头包含它。

/* 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; 
}
于 2013-05-20T09:52:05.083 回答
0

没有看到代码不能准确地说，但是您在开发时错过了最佳实践。你应该在 IE 和其他浏览器范围内开发时检查侧面，然后你可以在上升时修复它们。

  • 检查您的文档类型。
  • 重新设置元素
  • 确定 IE 框模型问题。
于 2013-05-20T09:51:00.403 回答