Chrome與Firefox的不同垂直對齊方式（blockquote：之前）

我想創建一個純CSS的CSS引號樣式。問題是：使用blockquote創建的引號：before在Chrome中比在Firefox和IE9中對齊得更低。任何幫助的歡迎，我很無能:(Chrome與Firefox的不同垂直對齊方式（blockquote：之前）

的jsfiddle：http://jsfiddle.net/w3A7h/3/

有一個簡單的方法，使Chrome專用的CSS規則只

來源

2012-08-15 herrmarek

你應該在這樣的情況下做的第一件事是什麼？使用reset stylesheet可以讓你的元素在默認情況下在瀏覽器之間呈現更加一致的效果，這將爲你節省大量的時間調試，因爲它會讓很多類似的問題消失。

http://jsfiddle.net/AWJyW/

我被放置在塊引用外位於第一<p>標籤內一改之前的報價風格。然後我將位置改變爲相對位置，將其左移，並設置負邊距以阻止文本變形。這部作品的原因是因爲在Chrome和Firefox在哪裏開始的界限絕對定位顯然不同意，他們同意在內部邊界的位置：對於TIPP，我使用Meyer的重置

blockquote p:first-child:before { 
     color: #ededed; 
     content: "\201C"; 
     display: block; 
     font-family: Georgia,serif; 
     font-size: 110px; 
     left: -56px; 
     margin-right: -40px; 
     position: relative; 
     float: left; 
     top: -30px; 
    }

來源

2012-08-15 01:50:59

謝謝。至於你的解決方案：它會產生另一個問題：到FF和Chrome的前面的元素的距離是不同的：http://jsfiddle.net/AWJyW/1/ – herrmarek 2012-08-15 02:02:03

編輯：對不起我的錯，我忘了刪除邊距並在內嵌風格的blockquote襯墊。 http://jsfiddle.net/AWJyW/2/ – herrmarek 2012-08-15 02:06:06

是的，我想說 - 這個方法對於頁面上的blockquote的位置是不可知的，而不是更少！很高興爲你工作。 :) – 2012-08-15 03:15:04

Chrome與Firefox的不同垂直對齊方式（blockquote：之前）

回答

相關問題