按鈕在Internet Explorer（CSS）不對齊

這是我的代碼：按鈕在Internet Explorer（CSS）不對齊

<h3 align="center">Is the mobile number above correct ?</h3> 
    <div class="yesno"><a href="bugme_pay.php"><div id="yes">YES</div></a> 
    &nbsp;&nbsp;&nbsp;<a href="#" class="nope"><div id="no">NO</div></a></div>

這是我的CSS：

/* yes and no buttons */ 

#yes 
{ 
    float:left; 
    display:inline; 
    width:180px; 
    background: #999999; 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
    color: #FFF; 
    padding-top: 10px;padding-bottom: 10px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    margin-bottom: 0.4em; 
    margin-top: 0.4em; 
} 
#yes a:visited, 
#yes a:link{ 
color: #fff; 
} 

#yes:hover { 
background-color: #9fd106; 
cursor:pointer; 
} 

#no 
{ 
    float:right; 
    display:inline; 
    width:180px; 
    background: #999999; 
    font-size: 26px; 
    font-weight: bold; 
    text-align: center; 
    color: #FFF; 
    padding-top: 10px;padding-bottom: 10px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    margin-bottom: 0.4em; 
    margin-top: 0.4em; 
} 
#no a:visited, 
#no a:link{ 
color: #fff; 
} 
#no:hover { 
background-color: #f20909; 
cursor:pointer; 
} 
.yesno 
{ 
width:400px; 
margin-left:100px; 
}

這是問題：

Buttons misaligned

我也有div切換隱藏/顯示div。這是：

<!--show hide div logic--> 
<style> 
div#a { } 
div#b { display:none; } 
</style> 
<script type="text/javascript"> 
$("a.nope").click(function(){ 
       $("#a").hide(); 
       $("#b").show(); 
       return false; 
     }); 
     </script> 
    <!--//end show hide div logic-->

來源

2010-12-20 422

您不能在塊元素（div）上包裝內聯元素（a）。因爲span是一個內聯元素，所以使用SPAN而不是DIV。

使用這樣的事情：

<h3 align="center">Is the mobile number above correct ?</h3> 
<div class="yesno"> 
    <span id="yes"><a href="#">YES</a></span> 
    <span id="no"><a href="#" class="nope">NO</a></span> 
</div>

來源

2010-12-20 02:01:24 GlennG

完美謝謝:) – 422 2010-12-20 03:05:24

兩個#yes和#no有180像素寬，以便按鈕消耗爲360px自己。包含<div class="yesno">是400px寬，所以你有40px剩餘。你也有三個不間斷的空間。如果你把非空白區域放在外面，所有東西都可以很好地呈現出來，所以我猜IE爲非空白區域分配了40px以上的空間。

您可以讓.yesno更寬，以適應所有不同的瀏覽器將如何呈現不間斷空格或者你可以溝 組裝機，讓上#yes，#no明確的寬度和.yesno採取保持分離按鈕的護理。

是的，你應該在這裏使用<span>而不是<div>，正如GlennG指出的那樣，但這不會導致問題發生。

來源

2010-12-20 02:56:36

謝謝姆:)好的建議 – 422 2010-12-20 03:05:43

格倫是正確的，你不能像在A標籤的INLINE元素內的DIV那樣擁有BLOCK元素。

木是短也是正確的。

此外，您不應該包括 nbsp;你應該使用CSS來格式化。您還可以刪除unnessasary HTML標籤的很多和CSS

例如http://jsbin.com/agojo4/5/edit

這可以更加細化，但是這僅僅是2分鐘的工作。

來源

2010-12-20 03:04:32 Daveo

或者只是把按鈕放在一個容器DIV：

#colcontainer { 
float:left; 
width:100%;

}

採取這一股利和環繞你的按鈕。

這應該做到這一點。

來源

2011-04-17 15:07:18 conceptArchitect

按鈕在Internet Explorer（CSS）不對齊

回答

相關問題