2010-11-14 19 views
1

所有支持的瀏覽器我有這樣的片段:鑑於here編輯here中心文字與CSS

我怎樣才能讓在圓圈中的「X」留在所有支持的瀏覽器(至少Firefox3的+和鉻)

段:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Backbone: Tody</title> 

    <style> 
    .delete { 
     -moz-border-radius: .75em; 
     -webkit-border-radius: .75em; 
     width: 1.4em; 
     height: 1.4em; 
     text-align: center; 
     display: inline-block; 
     line-height: 1.4em; 
     display:inline-block 
     vertical-align:middle 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     font-weight: bold; 
     color: white; 
     background-color: gray; 
     cursor: pointer; 
    } 
    .delete:before { 
     content: "\2715"; 
     /* content: "\00D7"; */ 
    } 
    .delete:hover { 
     background-color: red; 
    } 
    </style> 

</head> 
<body> 

<div class="delete"></div> 

</body> 
</html> 
+0

它不是已經在中間了嗎? – 2010-11-14 19:40:47

+0

該版本在FF上可以正常使用,但不能在Chrome上使用,必須有一些可以在 – clyfe 2010-11-14 19:50:41

回答

0

我通過設置這樣的餘量,使內部空間(盒+填充)將得到這個工作與字體大小相同。 http://jsbin.com/unera3/5/edit

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Backbone: Tody</title> 

    <style> 
    .delete { 
     -moz-border-radius: .75em; 
     -webkit-border-radius: .75em; 
     width: 1.4em; 
     height: 1.4em; 
     text-align: center; 
     line-height: 1.4em; 
     vertical-align:middle 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     font-weight: bold; 
     color: white; 
     background-color: gray; 
     cursor: pointer; 
    } 
    .delete:before { 
     content: "\2715"; 
     /* content: "\00D7"; */ 
    } 
    .delete:hover { 
     background-color: red; 
    } 
    </style> 

</head> 
<body> 

<div class="delete"></div> 

</body> 
</html> 
0

如果你希望它是像素完美的跨瀏覽器,最好的辦法可能是使用圖像 - 定位x將取決於不同的瀏覽器默認字體大小。

這麼說,我會說這是在OS X中FF4b和Chrome 7足夠近...

+0

上使用的東西,這主要是一個實驗 – clyfe 2010-11-14 19:50:59