为什么四个按钮不在IE中排队？ [英] why are the four buttons not lining up in IE?

问题描述

因此，我有这个页面，如果您看看4个按钮进行试驾，请点击租赁至Own Optionsext ...他们没有排在IE的div底部。在firefox中，它看起来不错。这里是html

 < div class =main-img-box> 
< img alt =零售POS系统src =/ images / software / video_pos_software.png> 
< div class =main-cont-software> 
 < a href =/ leaseclass =video-lease rest_icons>< span>< / span>< / a> 
< a href =javascript：addBookmark（'POSNation.com％20-％20Video％20Rental％20POS％20Systems'，window.location）; class =video-bookmark rest_icons>< span>< / span>< / a> 
< a href =/ shop_pos / index.php？route = information / contactclass =video-ask rest_icons>< span>< / span>< / a> < / DIV> 
< / div> 
  

以下是一些相关的CSS

  .main-img-box {
 height：398px; 
职位：亲属; 
宽度：100％; 
} 
 
 .main-cont-software {
 bottom：0; 
颜色：#FFFFFF; 
 height：76px; 
 left：14px; 
位置：绝对; 
宽度：100％; 
} 
 
 .video-testdrive {
 background：url（../ images / software / pos-sw-btn-video-testdrive.png）repeat scroll 0 0透明; 
 display：inline-block; 
 height：57px; 
 margin-right：9px; 
 width：169px; 
} 
 
 .video-lease {
 background：url（../ images / software / pos-sw-btn-video-lease.png）repeat scroll 0 0透明; 
 display：inline-block; 
 height：57px; 
 margin-right：9px; 
 width：169px; 
 
  

关于我缺少的任何想法

此外，还有一个很好的工具来测试IE ..我在firefox上使用firebug，它工作的很好，但我总是有一个艰难的时刻与IE浏览器......任何建议，以及

解决方案

您需要添加 vertical-align：top ..again

  .main-cont-software a {
 vertical-align：top; 
 
 $ / code> 

更多信息：



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


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

ul>



---








另外还有一个很好的测试IE的工具..我在firefox上使用firebug，它
的效果很好，但我总是有一段艰难的时间与IE ..任何建议
那里以及




到目前为止最好的选择是内置的（对于IE8 +）开发者工具（点击F12）。





如果你想在IE6 / 7测试中使用它们，你必须< a href =http://www.microsoft.com/download/en/details.aspx?id=18359 =nofollow noreferrer>下载它。尽管对于IE7，您可以在IE8 / 9中使用兼容模式进行测试。




So I have this page and if you look at the 4 buttons "Take a Test Drive" "Lease To Own Options" ext...They are not lining up with the bottom of the div in IE. In firefox it looks fine..here is the html

<div class="main-img-box">
                <img alt="Retail POS Systems" src="/images/software/video_pos_software.png">
                <div class="main-cont-software">
                <a href="/downloads/video_vision_download.php" class="video-testdrive rest_icons"><span></span></a>
 <a href="/lease" class="video-lease rest_icons"><span></span></a>
<a href="javascript:addBookmark('POSNation.com%20-%20Video%20Rental%20POS%20Systems',window.location);" class="video-bookmark rest_icons"><span></span></a>
<a href="/shop_pos/index.php?route=information/contact" class="video-ask rest_icons"><span></span></a>                  </div>
            </div>

Here is some of the relevant CSS

            .main-img-box {
                height: 398px;
                position: relative;
                width: 100%;
            }

            .main-cont-software {
                bottom: 0;
                color: #FFFFFF;
                height: 76px;
                left: 14px;
                position: absolute;
                width: 100%;
            }

            .video-testdrive {
                background: url("../images/software/pos-sw-btn-video-testdrive.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

            .video-lease {
                background: url("../images/software/pos-sw-btn-video-lease.png") repeat scroll 0 0 transparent;
                display: inline-block;
                height: 57px;
                margin-right: 9px;
                width: 169px;
            }

Any ideas on what i am missing

Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well

解决方案

You need to add vertical-align: top ..again.

.main-cont-software a {
    vertical-align: top;
}

More info:

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

---

Also is there a good tool to test IE..i use firebug on firefox and it works great but I always have a tough time with IE ..any suggestions there as well

By far the best option is the built-in (to IE8+) Developer Tools (hit F12).

If you want to use them while testing in IE6/7, you must download it. Though for IE7, you can just use Compatibility Mode in IE8/9 to test.

这篇关于为什么四个按钮不在IE中排队？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！