CSS重置无法正常工作

时间:2011-10-14 20:49:43

标签: css reset css-reset

我一直在研究一个小照片滑块。它在Chrome中看起来与FF略有不同,所以我认为CSS重置会让它们看起来都一样。我使用了雅虎! YUI CSS重置模型但没有任何改变。它在FF中看起来不错,但在Chrome中,右侧的“恢复”按钮太高,大图片底部的细灰线在主按钮所在的位置被切断。这是URL:

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重置正常工作的建议。不是如何解决您看到的特定按钮问题。当我向页面添加元素时,我不想每次都经历这个。

2 个答案:

答案 0 :(得分:3)

CSS重置不是为了使所有其他CSS跨浏览器。它旨在将所有不同浏览器上的所有客户端默认规则设置为相同的内容,以便您始终使用可预测的一组css规则。浏览器如何解释这些规则仍然是针对每个规则的。

在你的情况下,你仍然需要弄清楚如何编写在Chrome和FF中运行相同的CSS规则 - 重置只是稍微调整你的起点,它不会消除浏览器渲染差异。

您可能会发现跨浏览器的CSS框架(例如blueprintcss.org960.gs)对您当前的情况更有帮助。它们通常使用重置,但也有规则来补偿重置后CSS规则的渲染差异。

答案 1 :(得分:0)

关于重置,jball是非常正确的。它们只允许您从空白页开始,但您仍应编写适当的文档结构和良好的CSS以获得良好且一致的结果。

在您的情况下,页面中的所有元素都在页面中松动。这最终会给你带来麻烦。有些东西会移动几个像素,特别是当你没有为每个项目指定精确的高度时。每个浏览器都会以不同的高度呈现字体。这些可能是十分之一的像素,但当它们四舍五入时,您的网站在浏览器之间有点偏差。

当您使用更深入的元素嵌套时,您可以更好地使用定位元素(相对和绝对)。如果你为标题添加一个特定的div,并给它一个固定的大小,你可以非常精确地定位每个元素,这对标题和菜单来说特别方便。

我冒昧地创建了一个小例子,它只展示了一些定位的基础知识。它并不完美,使用颜色鲜艳的边框而不是图像进行布局。但它只是用于显示元素嵌套,绝对和相对定位,以及负边距技巧。 http://jsfiddle.net/YwCxQ/3/