IE9中水平未对齐的div，而在FF / IE8 / Chrome / Opera / Safari中很好
[英]Horizontally unaligned divs in IE9 while fine on FF/IE8/Chrome/Opera/Safari
问题描述
Good day everyone, I'm having trouble with IE9 today, everything else works but IE9 (and possibly IE10, no machine to test) 
大家好，我今天在IE9上遇到了麻烦，除IE9以外，其他所有功能都可以使用（可能还有IE10，没有要测试的机器）
Here's the code: JsFiddle 这是代码： JsFiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Titre</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
.carouselNav {
position: absolute;
z-index: 9998;
top: 92px;
right: 300px;
width:100px;
}
.carouselNav div {
padding:10px;
display:inline;
}
.carouselNav span {
padding-right:15px;
}
.carousel {
position:relative;
}
</style>
</head>
<body>
<div class="carousel" style="overflow: visible;">
<div class="carouselMedia"> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=phone_ip"><img id="carousel_img_item_1" src="http://achatplus.com/static/template/style1/img/header/slide1_phone_ip_fr.jpg" alt=""/></a>
<a
href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=mobility">
<img id="carousel_img_item_2" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide2_mobility_fr.jpg"
alt="" />
</a> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=shipping"><img id="carousel_img_item_3" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide3_shipping_fr.jpg" alt=""/></a>
<a
href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=office">
<img id="carousel_img_item_4" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide4_office_fr.jpg"
alt="" />
</a> <a href="http://extranet.achaplus.local/~apouliot_site_1284/fr/solutions.php?solution=internet"><img id="carousel_img_item_5" style="display: none;" src="http://extranet.achaplus.local/~apouliot_site_1284/static/template/style1/img/header/slide5_internet_fr.jpg"alt=""/></a>
</div>
<div class="carouselNav">
<div id="item_1" title="1" class=""></div>
<div id="item_2" title="2" class=""></div>
<div id="item_3" title="3" class=""></div>
<div id="item_4" title="4" class=""></div>
<div id="item_5" title="5" class=""></div>
</div>
</div>
</body>
Ok so there is an image and there are 5 divs aligned over the 5 buttons (the active one is green) 好的，所以有一个图像，并且在5个按钮上对齐了5个div（活动的一个是绿色的）
Each div is supposed to be empty so I used a padding of 10px to make 20x20 divs (bonus points if you find why it's 20x38). 每个div应该都是空的，因此我使用10px的填充来制作20x20的div（如果发现为什么是20x38，则可以得到加分）。 The surrounding div is 100px wide. 周围的div宽度为100px。
In every browser but IE9, the divs are perfectly fine. 在除IE9之外的所有浏览器中，div都很好。 However on IE9 the main div is about 14px too high. 但是在IE9上，主要div大约过高了14px。
I ran out of ideas of what the problem might be a long while ago. 对于很久以前的问题，我没有想法。
Every bit of help and suggestion is much appreciated 非常感谢您的帮助和建议
2 个解决方案
解决方案1
0 2013-01-30 21:11:40
它们在IE9和IE10中对我来说看起来不错，但我建议您使用width:20px;height:20px;display:inline-block而不是padding:10px技巧。
解决方案2
0 已采纳 2013-01-31 14:21:42
I ended up using position:absolute on the divs. 我最终在div上使用position：absolute。
That caused ie to not take the clicks on the divs unless there was something in it so I put an with a font-size:100px; 这导致ie除非有任何东西，否则不对div进行点击，因此我将其与font-size：100px;放在一起。 so that it fills the div. 使它充满div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.