CSS重置不起作用

我一直在研究一個小照片滑塊。它在Chrome中看起來與FF中略有不同，所以我認爲CSS重置會使它們看起來都一樣。我使用Yahoo! YUI CSS重置模式，但沒有任何改變。它在FF中看起來不錯，但在Chrome中，右側的「恢復」按鈕會過高，並且大圖片底部的細灰線會被切斷，主按鈕位於此處。這裏是網址：CSS重置不起作用

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復位正常工作的意見。不是如何解決你看到的特定按鈕問題。當我在頁面中添加元素時，我不希望每次都要經過這些元素。

來源

2011-10-14 Thread7

CSS重置不是爲了讓所有其餘的CSS跨瀏覽器而設計的。它旨在將所有不同瀏覽器上的所有客戶端默認規則設置爲相同的事物，以便您始終使用可預測的一組css規則進行工作。瀏覽器如何解釋這些規則仍然是每個人都特有的。

在你的情況下，你仍然需要弄清楚如何編寫在Chrome和FF中運行相同的CSS規則 - 重置只是簡單地縮小你的出發點，它不會消除瀏覽器渲染差異。

您可能會發現跨瀏覽器CSS框架（例如blueprintcss.org或960.gs）對您當前的情況更有幫助。他們經常使用重置，但也有補償重置後CSS規則呈現差異的規則。

來源

2011-10-14 20:55:10 jball

jball是非常正確的重置。他們只是讓你從一個空白頁面開始，但你仍然應該寫一個合適的文檔結構和良好的CSS來獲得良好和一致的結果。

就你而言，頁面中的所有元素都是鬆散的。這最終會給你帶來麻煩。有些東西會移動幾個像素，尤其是當您沒有爲每個項目指定確切的高度時。每種瀏覽器都會以不同的高度渲染字體。這些可能是像素的十分之一，但是當它們四捨五入時，您的網站在瀏覽器之間有點偏離。

當您使用更深一點的元素嵌套時，您可以更好地使用定位元素（相對和絕對）。如果你爲標題放置一個特定的div，並給它一個固定的大小，你可以非常精確地定位每個元素，這對標題和菜單非常有用。

我冒昧地創建了一個小例子，它只顯示了一些定位的基礎知識。這不是完美的，並使用鮮豔的邊框，而不是佈局的圖像。但它只是爲了顯示元素嵌套和絕對和相對定位，以及負邊距技巧。 http://jsfiddle.net/YwCxQ/3/

來源

2011-10-14 21:24:30 GolezTrol

哇，謝謝你創建這個例子。我打算玩，看看我能找到什麼。 – Thread7

其實我找到了。我在我的CSS文件中有這條線： margin：1em 0px; 當我將其更改爲： margin：13px 0px; 然後一切正常。必須是一個瀏覽器將單位「em」解釋爲略有不同。 – Thread7

這很可能。混合像素點（em = 12pt，我認爲）很難做到。使用點，特別是字體大小和行高，通常用於支持視覺受損。在瀏覽器中設置較大的字體大小對文本（和其他元素）有pt或em大小的影響。在最新的瀏覽器中，縮放整個頁面比較容易，但它們仍然具有此文本縮放功能。但是，許多網站建設者使用像素值（即使是字體大小）來強制其頁面在所有瀏覽器上看起來完全相同。 – GolezTrol

CSS重置不起作用

回答

相關問題