按钮在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）不对齐

回答

相关问题