HTML formats correctly after applied focus
I have a selection box that uses ajax to populate a div with new information. When I select an option the resulting text appears and formats correctly. However, when I select something new the resulting text does not format correctly and appears to be squished together. The problem goes away when I apply focus by clicking in the relative area.
I only seem to have this problem with IE. I have no idea where to start looking to debug this thing since it works perfectly in Firebug and I couldn't find any related topics on SO. Has anyone ever had this problem before?
*alright, I have no idea what code to showcase for help. But here I go:
$.ajax({
type: "POST",
url: "bccDates.php",
data: "CQID=" + CQID + "",
success: function(response){
$('#BCCDates').html(response); //div that updates
}
});
//Below if the php/html of the affected area.
echo "<div id=\"boxcarCapacityDates\"> \n";
echo "<form id=\"newDate\" name=\"newDate\" onSu开发者_JAVA技巧bmit=\"return validateDate('".$ID."')\"> \n";
echo "<h3>".$CQIDName."</h3> ";
echo "<p>No groupings exist for this Boxcar.</p>";
echo "<p>Enter a Date: </p>";
echo "<input type=\"text\" name=\"Date\" >\n";
echo "<br /><p><input id=\"validate\" class=\"small orange awesome\" type=\"submit\" value=\"Submit\" ></p> \n";
echo "</form> \n";
echo "</div> \n";
The problem most likely lies in Internet Explorer's handling of layout, and perhaps specifically "hasLayout" (http://www.satzansatz.de/cssd/onhavinglayout.html).
I've had this problem loading div's into a page via Ajax, which would also nearly invariably right itself (i.e. the element appears correctly) after clicking the element in question.
The resolution in my experience has nearly always been somewhat of a css-crap-shoot, forcing the inserted element / its parent(s) etc to hasLayout (sic) through applying zoom
(particularly) and position:relative
.
So: have a shot applying zoom:1
(first), and position:relative
(less likely to fix-all) and to the element in question, testing, reverting, applying to its parent, testing etc etc ad nauseum up the DOM.
In lucky cases, it will be resolved with the application on the inserted element or its parent, but it may depend to a large degree how all of the elements parents have been displayed, and how complicated the DOM is.
Once you've got the winning combination, I'd say put the zoom:1
's etc in a separate IE specific stylesheet, and include it with IE-version specific tags.
Good luck!
精彩评论