Question

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

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

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

Answer 1

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

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

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

重置示例：

/* 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 2

您可以尝试Chrome的网络检查器（右键单击，检查元素）。然后去扩展Computed Style手风琴。您将看到正在应用于元素的任何内容。 Firefox（Firebug）或Opera（Dragonfly）或IE（F12 Dev。工具）的情况也是如此

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

此外，某些元素（如按钮）在Firefox和Chrome 默认上看起来不一样。您需要CSS才能使它们在所有浏览器中看起来都一样。

Html标签隐藏属性

2 个答案: