Horizontally unaligned divs in IE9 while fine on FF/IE8/Chrome/Opera/Safari
Question
Good day everyone, I'm having trouble with IE9 today, everything else works but IE9 (and possibly IE10, no machine to test)
Here's the code: 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)
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). The surrounding div is 100px wide.
In every browser but IE9, the divs are perfectly fine. However on IE9 the main div is about 14px too high.
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 answers
solution1
0 2013-01-30 21:11:40
它们在IE9和IE10中对我来说看起来不错，但我建议您使用width:20px;height:20px;display:inline-block而不是padding:10px技巧。
solution2
0 ACCPTED 2013-01-31 14:21:42
I ended up using position:absolute on the divs.
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; so that it fills the div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.