标签: css-reset

例如,Meyer重置有一长串元素¹,我相信可以用一个*？

我见过一些用法:

* {
   margin: 0;
   padding: 0;
 }

但更多"高级"重置似乎与明确说明标签有关.

我没有看到覆盖在标签列表中唯一的元素被覆盖(我相信)用*的input,button和select-the埃里克迈耶复位,其实,没有出现真正具有这些元素涉及.如果避免重置这些元素就是问题......为什么不呢？浏览器显然并不都显示相同的表单元素.

^{1, 如果你很好奇.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, …}

这有点烦人.似乎webkit(通过chrome 13 canary)正确地设计了各种输入类型,并且它以一种主要方式与设计发生冲突.

特别是,这些让我头疼:

• 选定的元素发光(通过轮廓)
• 占位符=文本样式
• 围绕着焦点的textarea和输入字段的丑陋发光

我正在使用样板和现代化器.

input[type=search]带占位符的简单覆盖文本样式.

我知道你可以通过它来定位它

input::-webkit-input-placeholder

然而,这似乎不能像这样的东西text-shadow- 这有点废话.有谁知道这可能是一个将被修复的错误,还是我需要回到javascript占位符解决方案？

搜索输入带有白色bg并删除基本CSS类中定义的圆角.我找到了重置代码:

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=search] {
  /* the webkit overrides need to stay at the top */
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  /* your styles here */
}

它有点帮助.

我通过设置修复表单元素周围的光晕outline: none.

我想我真正想要的是一个CSS重置,它取出user agent stylesheet了影响它的(根据网络检查员)任何预定义的样式.是否有任何重置可以做到这一点,所以尽管doctype是HTML5,元素的呈现方式与HTML5之前一样简单,并在基本CSS中遵循隐式规则设置？

我不想这么说,但尽管它的所有内存占用问题和插件的缓慢,FireFox 4实际上完美呈现了一切.Webkit不应该试图为您设计样式,只需提供一个API,如果您想要...

我有这个网站http://www.korsholm-jagtrejser.dk/

在文中

Korsholm Jagtrejser kan tilbyde jagtrejser til et bredt udvalg af jagtlande

Korsholm <b>周围和jagtrejser有<i>,但它没有显示为粗体/斜体.我正在使用meyerweb reset css,它有一个<b>和<i>.

我的镀铬检查员没有说它不应该是大胆的.

有人可以找出问题吗？

其他设计师如何规范浏览器的填充和边距.我已经尝试过CSS Resets(目前正在使用YUI),但是我仍然遇到很多不一致的问题.

对于某些元素,似乎某些浏览器将填充或边距设置为0px将触发浏览器使用由该浏览器确定的默认填充和边距.有没有办法硬重置所有浏览器的填充或边距,以便有一致的外观？

更新

从其他研究和反馈看来,几乎不可能让网站在不同的浏览器中看起来相同.我想我会坚持使用CSS重置,只是尝试更好地规划我的网站.

我不确定如何克服覆盖样式设置的默认浏览器机制,这可能需要付出太多努力.

我的目标是支持IE10 +,以及最流行的浏览器的最新版本.我想知道是否有一个css重置只是针对那些忽略旧的IE和Moz修复程序的特定浏览器.

我找不到任何东西,但也许我在Google上搜索时忽略了一些.我打算创建我自己的,我只是不想重做工作,如果有一个我可以使用的库.

谢谢!

使用css重置后,我的所有标题标签都被重置(当然).像平常一样对它们进行造型的最佳方法是什么.

当然有更好的方法吗？

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }

我刚刚发现了Yahoo UI 重置CSS工具/文件,我在我的网站上使用它.在我的机器上,我有Internet Explorer 7和Firefox 3.01,我的网页在这两个浏览器上看起来是一样的.一位朋友正在使用Internet Explorer 6,页面完全一团糟.我有两个问题:

1. 写作CSS时我是穷人/傻瓜吗？
2. 如何在我的机器上使用不同的浏览器测试我的网页？

有很多CSS重置.我正在为移动设备构建一些东西,我想尽可能多地跳过不必要的CSS,所以我想知道是否有一个详尽的HTML测试页面我可以运行一些CSS重置来测试它们？

测试规则也是了解需要哪些边缘情况,目标是什么以及原因的好方法.

更新:使用normalize.css 添加了简单的测试示例http://jsfiddle.net/7UhrW/1/.

Chrome/WebKit和Firefox具有不同的渲染引擎,这些渲染引擎以不同的方式呈现字体,特别是具有不同的尺寸.这并不令人惊讶,但令人惊讶的是一些差异的严重程度.

我可以随时调整页面上的各个元素以使其更相似,但至少可以说这很乏味.我一直在寻找更系统的解决方案,但许多资源(例如SO答案)只是说"使用重置包".虽然我确信它修复了一些其他的东西,比如填充和间距,但它似乎对字体尺寸没有任何影响.

例如,如果我从http://html5reset.org/获取重置包,我可以显示相当大的差异(请注意检查员中显示的布局尺寸).[下面的图片实际上比在此答案中显示/调整大小更高 - 例如在Chrome中,您可以右键单击并在新标签中打开图像.

<h1 style="font-size:64px; background-color: #eee;">Article Header</h1>

使用Helvetica,Chrome的高度更低.

<h1 style="font-size:64px; background-color: #eee; font-family: Helvetica">Article Header</h1>

使用不同的字体,Chrome再次呈现更高的字体,但另外字母间距变得混乱(可能是由于字体的粗体化):

<style>

@font-face {
  font-family: "MyriadProRegular";
  src: url("fonts/myriadpro-regular-webfont.eot");
  src: local("?"), url("fonts/myriadpro-regular-webfont.woff") format("woff"), url("fonts/myriadpro-regular-webfont.ttf") format("truetype"), url("fonts/myriadpro-regular-webfont.svg#webfonteknRmz0m") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "MyriadProLight";
  src: url("fonts/myriadpro-light-webfont.eot");
  src: local("?"), url("fonts/myriadpro-light-webfont.woff") format("woff"), url("fonts/myriadpro-light-webfont.ttf") format("truetype"), url("fonts/myriadpro-light-webfont.svg#webfont2SBUkD9p") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "MyriadProSemibold";
  src: url("fonts/myriadpro-semibold-webfont.eot");
  src: local("?"), url("fonts/myriadpro-semibold-webfont.woff") format("woff"), url("fonts/myriadpro-semibold-webfont.ttf") format("truetype"), url("fonts/myriadpro-semibold-webfont.svg#webfontM3ufnW4Z") …

当开始一个新项目时，使用哪些工具、框架和库始终是一个问题。我经常包含Eric Meyer CSS Reset，但这次我将切换到Normalize.css。我将其理解为一个可定制的起点，而不是一个库。我建议包含 normalize.css 文件并覆盖它的特定部分。但我不太确定这是否是正确的方法。更新 normalize.css 文件会比较困难。看来 Normalize.css 也不确定。

来自github.com 的文档

\n

Normalize.css 是一个可自定义的 CSS 文件，[\xe2\x80\xa6]

\n

README.md，第 3 行

\n

建议您将 normalize.css 文件作为未修改的库代码包含在内。

\n

README.md，第 21 行

你有什么建议？