0

当所有人在不同的浏览器上执行 html 时，我都会遇到一个问题。它不会在所有浏览器中按预期呈现。

我注意到如果您指定了某些属性，它将在所有浏览器中呈现相同的内容。一些浏览器会调整元素的属性，但其他浏览器不会。所以，我的问题是

是否有任何工具可以为您提供我在 css 中未指定的所有元素属性？这样，我将不依赖浏览器渲染算法，我只会看到哪些浏览器在 css 中渲染和复制属性最好:) 提前谢谢

4

2 回答 2

1

浏览器对某些元素有自己的默认样式（例如边距、填充和字体），并且它们可能因浏览器而异。

您可以使用 Chrome Dev Tools 或 Firebug（均为 F12）的 Element Inspector 来查看元素应用了哪些样式。依赖默认样式不是一个好主意，因为它们可能会在新版本的浏览器中发生变化。最好用您自己的 CSS 覆盖它们。

另一种选择是使用CSS 重置，旨在删除所有默认浏览器样式，以减少不同浏览器之间的不一致。

重置示例：

/* 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-08-09T08:14:44.803 回答
1

您可以尝试 Chrome 的 Web Inspector（右键单击，检查元素）。然后去展开 Computed Style 手风琴。您将看到应用于元素的任何内容。Firefox (Firebug) 或 Opera (Dragonfly) 或 IE (F12 Dev. Tools) 也是如此

除此之外，我强烈建议您使用诸如“Normalize.css”之类的重置样式表来覆盖浏览器在元素上应用的样式，以便它们在所有浏览器中看起来或多或少相同。

此外，默认情况下，某些元素（例如 Buttons）在 Firefox 和 Chrome 上看起来不一样。您将需要 CSS 使它们在所有浏览器中看起来都一样。

于 2013-08-09T08:15:10.483 回答