CSS 重置不起作用
我一直在研究一个小照片滑块。它在 Chrome 中与在 FF 中看起来略有不同，因此我认为 CSS 重置将使它们看起来相同。我用的是雅虎！ YUI CSS 重置模型但没有任何改变。它在 FF 中看起来不错，但在 Chrome 中，右侧的“恢复”按钮升得太高，大图片底部的一条细灰线在主按钮所在的位置被切断。这是网址：
http://www.replayground.com/slider/02.html
您可以忽略圆圈下方的内容。只是测试那里的东西。
以下是我添加到 02.html 文件中的内容：
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
我真的很想获得有关如何使 CSS Reset 正常工作的建议。不是如何解决您看到的特定按钮问题。当我向页面添加元素时，我不想每次都经历这个。
I have been working on a little photo slider. It looks slightly different in Chrome than in FF so I thought a CSS reset would make them both look the same. I used the Yahoo! YUI CSS reset model but nothing changed. It looks good in FF but in Chrome the "Resume" button on the right side sticks up too high and a thin gray line at the bottom of the big pictures gets cut off where the main buttons are located. Here is the URL:
http://www.replayground.com/slider/02.html
You can ignore the stuff below the circles. Just testing stuff down there.
Here is what I added to my 02.html file:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
I'd really like advice on how to get CSS Reset working correctly. Not how to fix the specific buttons problem you see. As I add elements to the page I don't want to have to go through this each time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
CSS 重置并不是为了使 CSS 的其余部分能够跨浏览器而设计的。它旨在将所有不同浏览器上的所有客户端默认规则设置为相同的内容，以便您始终按照一组可预测的 CSS 规则进行工作。浏览器如何解释这些规则仍然是每个浏览器所特有的。
就您而言，您仍然需要弄清楚如何编写在 Chrome 和 FF 中运行相同的 CSS 规则 - 重置只是稍微调整您的起点，它不会消除浏览器渲染差异。
您可能会找到一个跨浏览器 CSS 框架（例如 blueprintcss.org 或 960.gs) 对您当前的情况更有帮助。他们经常使用重置，但也有补偿重置后 CSS 规则渲染差异的规则。
A CSS reset is not designed to make all the rest of CSS cross-browser. It is designed to set all of the client default rules on all the different browsers to the same thing so that you are always working from a predictable set of CSS rules. How the browsers interpret those rules is still specific to each one.
In your case, you still need to figure out how to write CSS rules that operate the same in both Chrome and FF - the reset simply levels your starting point a little, it doesn't remove the browser rendering differences.
You may find a cross browser CSS framework (e.g. blueprintcss.org or 960.gs) to be more helpful for your current situation. They often use a reset, but also have rules that compensate for the differences in the rendering of the after-reset CSS rules.
jball 关于重置的说法非常正确。它们只允许您从空白页面开始，但您仍然应该编写正确的文档结构和良好的 CSS 以获得良好且一致的结果。
就您而言，页面中的所有元素在页面中都是松散的。这最终会给你带来麻烦。有些东西会移动几个像素，特别是当您没有为每个项目指定确切的高度时。每个浏览器以不同的高度呈现字体。这些可能是像素的十分之一，但是当它们四舍五入时，您的网站在浏览器之间会有点偏差。
当您使用更深一点的元素嵌套时，您可以更好地利用定位元素（相对和绝对）。如果您为标题放置一个特定的 div，并给它一个固定的大小，您可以非常精确地定位其中的每个元素，这对于标题和菜单尤其方便。
我冒昧地创建了一个小例子，它仅展示了定位的一些基础知识。它并不完美，并且使用颜色鲜艳的边框而不是图像进行布局。但它只是用于显示元素嵌套以及绝对和相对定位，以及负边距技巧。
http://jsfiddle.net/YwCxQ/3/
jball is very right about the resets. They just allow you to start with a blank page, but you should still write a proper document structure and good CSS to get good and consistent results.
In your case, all elements in your page are loose in the page. This will give you trouble in the end. Some things will shift a few pixels, especially when you don't specify exact height for every item. Fonts are rendered in different heights by each browser. These may be tenths of pixes, but when they get rounded, your website is a little off between browsers.
When you use a little deeper nesting of elements, you can make better use of positioning elements (relative and absolute). If you put in a specific div for the header, and give it a fixed size, you can position each element in there very precisely, which is especially handy for headers and menu's.
I took the liberty of creating a small example, which shows just some basics of positioning. It is not perfect and uses brightly colored borders instead of images for the layout. But it's just for showing the element nesting and absolute and relative positioning, along with a negative margin trick.
http://jsfiddle.net/YwCxQ/3/