How to Find and Fix IE6 Double Margin Bug Using jQuery Custom Selectors
By jonkarna
I ran into the ie6 double margin bug and I decided that I wanted to be able to find these bugs (and fix them) with jQuery. I could just have fixed the bug using this solution, but I wanted to create a way to fix it if I bypass an error of this sort and also log it.
In order to create a fix, I had to find out if the selected element was floating and did not have a display of inline.
jQuery.fn.fixMargin = function() {
return this.each(function() {
if (jQuery(this).css("float") === "left" || jQuery(this).css("float") === "right") {
jQuery(this).css("display", "inline");
}
});
}When I finished writing that code, I wondered if things could be a heck of a lot easier if I could just use a couple custom jQuery selectors to find elements that might need fixing. Therefore, I made a couple custom selectors to make this process easier.
jQuery.extend(jQuery.expr[':'],{
float: function(a) {
return (jQuery(a).css("float") === "left" || jQuery(a).css("float") === "right");
},
inline: function(a) {
return jQuery(a).css("display") === "inline";
},
marginx: function(a) {
return ((parseInt(jQuery(a).css("margin-left")) > 0) || (parseInt(jQuery(a).css("margin-right")) > 0));
},
marginx: function(a) {
return ((parseInt(jQuery(a).css("margin-bottom")) > 0) || (parseInt(jQuery(a).css("margin-top")) > 0));
},
margin: function(a) {
return ((parseInt(jQuery(a).css("margin-left")) > 0) || (parseInt(jQuery(a).css("margin-right")) > 0) || (parseInt(jQuery(a).css("margin-bottom")) > 0) || (parseInt(jQuery(a).css("margin-top")) > 0));
}
});I don't really need the marginy and margin selectors, but I figured that I should just create them because the belong with the marginx selector. Now, all that is needed to find and fix an element that falls victim to this bug is the following.
jQuery.ie6log = new Array();
jQuery.fn.fixMargin = function() {
return this.each(function() {
if (jQuery(this).is(":float:margin:not(:inline)")) {
jQuery(this).css("display", "inline");
jQuery.ie6log.push("fixMargin: id=" + jQuery(this).attr("id") + " class=" + jQuery(this).attr("class"));
}
});
}
jQuery("*").fixMargin();This could also be used to find bugs so that you can fix them in your css.
Comments
No comments yet.
