Problem
The result of the following code will be three list-items on a single line with a black border and no padding or spacing. However, in Internet Explorer the list-item with the clear-fix class still takes up visual space on the screen causing a gap between the list-items and the bottom border.
How would you solve this issue?
style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
}
ul, ul li {
padding: 0;
margin: 0;
list-style: none;
}
ul {
border: 1px solid #000;
}
ul li {
float: left;
}
code.htm
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li class="clear-fix"></li>
</ul>
Good Browsers
Bad Browsers
Solution 1
You can use targeting to set the clear-fix style to display: inline for just IE.
<style type="text/css">
<![if IE]>
.clear-fix {
display: inline !important;
}
<![endif]>
</style>
Notes: This solution requires code specific to a browser, and is required to be an embedded style-sheet, which is not ideal.
Solution 2
You can attach a class to the body tag to specify the browser, and then set a specific style.
style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
}
.ie .clear-fix {
display: inline !important;
}
Notes: This solution is more ideal than the last, as it can be stored in the external CSS file; however, it requires some server side logic to determine browser type when appending the class to the body tag and it still requires code that’s specific to a browser.
Solution 3
Diagnose what the root problem is, there’s spacing, which usually means it thinks their is content, so we need to set the correct styles to counteract this. It probably thinks there’s content because of the bullet point, which we’ve disabled.
style.css
.clear-fix {
float: none !important;
height: 0 !important;
overflow: hidden !important;
clear: both !important;
display: block !important;
line-height: 0 !important;
font-size: 0 !important;
}
Notes: This solution is the best as it attacks the problem at its root. The issue is that IE7 and lower don’t auto collapse list-items when they are empty, so we have manually set the styles that the browser should’ve set to begin with.
Conclusion
The best solution to solving discrepancies in Internet Explorer is to find out what IE is supposed to be doing, and then manually specify that. Sometimes you’ll need to reorganize your code around to accommodate a rather tricky bug in IE like its z-index issue; however, in most cases you can solve it simply with CSS which is not specific to any browser. I have yet to encounter an IE bug that I’ve not been able to solve without the use of browser specific style-sheets or classes.
Useful Links