【问题标题】:What's the purpose of using CSS browser reset code?使用 CSS 浏览器重置代码的目的是什么?
【发布时间】:2014-08-29 00:26:16
【问题描述】:

这是用于浏览器重置的有效 CSS 吗?它有什么作用?我已经用了很长时间了。

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; overflow:hidden; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

【问题讨论】:

标签: css


【解决方案1】:

这是 Eric Meyer 的 CSS 重置版本。你可以在这里读到它: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

重置样式表的目的是减少浏览器在 诸如默认行高、页边距和标题字体大小之类的东西, 等等。

这里是它为什么以及如何实现的历史:http://sixrevisions.com/css/the-history-of-css-resets/

【讨论】:

  • 所以,我明白了,这是一段很长的历史,我正在阅读它。感谢分享。
【解决方案2】:

是的,这是一种 CSS 重置。它基本上将所有默认间距重置为零,将所有默认对齐方式重置为左上角,以及重置所有标题的字体大小和粗细。 CSS 重置的目的是使网站在所有浏览器中看起来一致。


不过,我不太喜欢大量的 CSS 重置。这是我的:

* {
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

table {
    border-collapse: collapse;
}

效果很好。

【讨论】:

  • 您使用border: none而不是等效但稍短的border: 0有什么特别的原因吗?
  • @thirtydot:我觉得0 不太清楚。不过,为了缩小,我确实将其更改为 0
【解决方案3】:

我在将它与 bootstrap wysihtml5 库一起使用时遇到了问题。 事实上,当我尝试使用斜体或粗体样式时,它没有用。 为了让它工作,我不得不从这个文件中删除标签“i”和“b”。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-23
    • 1970-01-01
    • 1970-01-01
    • 2014-07-21
    相关资源
    最近更新 更多