錨（<a>）尺寸只有內嵌塊跨度

Question

有人可以解釋我這一小段HTML的情況怎麼樣？

http://jsbin.com/akome5

在最新的瀏覽器（FF4，Chrome10，IE9，IE8，歌劇11），元件的佈局是這樣的：

咩？我不明白爲什麼？！ 爲什麼高度和寬度不像可見框（橙色+紅色空格）那麼大？

添加「display：inline-block;」到元素似乎並沒有真正解決它。 我該如何解決它？

Thx !!

Answer 1

• Setting a width and height on an A tag

Answer 2

嘗試添加以下樣式。

a.button { 
    display: block; 
    float: left; 
    overflow: auto; 
} 
a.button span { 
    display: block; 
    float: left; 
} 

Answer 3

我建議不涉及跨

HTML不同的方法：

<a class="button2" href="#">Text Text Text</a> 

CSS：

/* Button 2 */ 
.button2 { 
    background-color:red; 
    border:solid 10px orange; 
    border-top:0; 
    border-bottom:0; 
    display:inline-block; 
    color:#fff; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size:11px; 
    font-weight:bold; 
    line-height:30px; 
    text-decoration:none; 
    padding:0 3px; 
} 

老（上）新（底部）

http://jsfiddle.net/pxfunc/vr7gJ/

Answer 4

的信息我設法做沒有浮動：左，這裏是整個CSS：

a.button{ 
    display: inline-block; /* <- added */ 
    text-decoration: none; 
} 

a.button span{ 
    display: inline-block; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    height: 30px; 
    line-height: 30px; /* <- added */ 
    text-decoration: none; 
} 

a.button .left, a.button .right{ 
    background-color: orange; 
    width: 10px; 
} 

a.button .text{ 
    background-color: red; 
    color: white; 
} 

line-height指令是關鍵。