Quick Tip: IE Bug Fixes For Twitter Bootstrap
Quick Tip: IE Bug Fixes For Twitter Bootstrap
During a recent web development project using Twitter Bootstrap, I came across two CSS bugs in IE7 and IE8 that drove me nuts for a while. Hopefully these quick fixes will help anyone else who encounters these issues.
The first is an issue in the drop-down for IE7/8, which seems to be a combination of the
z-index and the filter applied to the fixed-position element not playing nice. The easiest and most practical way to solve this is to simply get rid of the filter from .toolbar. All this line does is apply a gradient to the element and remember since we are dealing with two old browsers in IE7 and IE8 all we are looking for here is graceful degradation so removing the filter shouldn't be a big concern in the grand scheme of your design. You can read more about this issue on here.The other issue I've come across doesn't have much documentation or information on it but the fix I found is worth mentioning. Within the navbar I've found that any image links that have the
.pull-left or .pull-right classes applied to the <a> tag, are not floated correctly. I've found if you remove either of these classes from the <a> tag and apply them directly to the img tags themselves, the issue corrects itself. In other words, try floating the img not the <a> link.
If anyone else has come across any other IE bugs for Twitter Bootstrap feel free to share.
