为什么一个标签低于IE中的跨度 [英] why is the a tag lower then the spans in IE

问题描述

以下是我的页面

HTML

<div class="pp-foot">
  <span class="big-call-btn"></span>
  <span class="big-chat-btn"></span>
  <a href="#contact_form_photo" rel="prettyPhoto[inline]" class="footer_btn_email_new  big-email-btn"><span></span></a>
</div>

CSS

.pp-foot {
    background: url("../images/prod-page-foot.jpg") no-repeat scroll center top #E4E4E4;
    height: 77px;
}

.big-chat-btn {
   background: url("../images/product-chat-btn.png") no-repeat scroll center top transparent;
   margin: 0 0 0 11px;
}

.pp-foot a {
    margin: 0 0 0 11px;
}
.big-email-btn {
    background: url("../images/product-email-btn.png") no-repeat scroll center top transparent;
}
.big-call-btn, .big-chat-btn, .big-email-btn {
    display: inline-block;
    height: 72px;
    width: 230px;
}

任何想法导致问题的原因。 Firefox很好，但IE不是

Any ideas what is causing the issue. Firefox is fine but IE is not

推荐答案

您需要添加 vertical-align：top 。

.big-call-btn, .big-chat-btn, .big-email-btn {
    display: inline-block;
    vertical-align: top;
    height: 72px;
    width: 230px;
}

更多信息：

• http：/ /blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/


• http://www.brunildo.org/test/inline-block.html

• http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
• http://www.brunildo.org/test/inline-block.html

这篇关于为什么一个标签低于IE中的跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！