为什么四个按钮不在IE中排队? [英] why are the four buttons not lining up in IE?
问题描述
< 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屋!