IE8 CSS Absolute Positioning Random Bug
I'm encountering a frustrating but seemingly random rendering bug in IE8. I have some absolutely positioned elements on the page (positioned in relation to the page body), the displaying of which are toggled by jQuery.
8 times out of 10 the elements are rendered correctly, but sometimes the positioning is not obeyed and they are simply placed in the top left corner of the browser window (effectively absolute positioned at top 0, left 0).
If I look at the element properties in the IE Developer Toolbar, I can see that the correct css properties are set - they are just not being applied. If I resize the browser window, then the element will jump to its correct position - so it does look like a genuine rendering bug.
I'm setting a correct DOCTYPE on the page, so the brower isn't in quirks mode.
Any ideas开发者_如何学Python how I can combat this or has anyone else experienced similar?
If I recall correctly, the problem occurs when trying to set the position of something before it is displayed.
e.g.
- hide object
- set position
- show object
The object will appear in the top left, until the position is set again or the window is resized forcing IE to re-calculate positions
Have you tried the IE8 specific properties:
-ms-background-position-x: 1px; -ms-background-position-y: 29px;
They only work in IE8 and address this exact issue.
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375
I too have experienced this, I am using some jquery to show an absolutely positioned element that is only visible when another element is clicked. How odd that Microsoft continue to get the basics completely wrong.
加载中,请稍侯......
精彩评论