Geek Answers Handbook

IE8 fixed position top & bottom resize bug

Based on my CSS, all browsers, including IE7, show that my bottom line is correct and fixed, all the time.

.bottom-fixed { position: fixed; bottom: 0; margin-left: -235px; min-width: 1160px; max-width: 130em; width: 100%; }

However, there is something strange about IE8. If you resize the browser window using your lower right corner (a way to simultaneously change the width and height of the window), everything will be fine.

But if you resize the window by capturing the top or bottom of your browser window, the / div panel is stuck in a position as if the position were absolute, not positional: fixed.

Any idea how to fix this?

(Using Doctype for HTML5)

+4
source share
4 answers

I could not fix this with the parent floating solution from this topic that Umer talked about .

So, I fixed it with a simple Javascript script that applies position: it is fixed all the time when the window is resized.

HTML

 <!--[if IE 8 ]> <script type="text/javascript"> $(window).resize(function () { ApplyPositionFixed(); }); </script> <![endif]-->

Javascript

 function ApplyPositionFixed() { // Check if element exists if ($("#bottom-bar-content").length) { $(".bottom-fixed").attr('style', 'position: fixed;'); console.log("Window resized"); } else { console.info("No element changes on Window resize"); } }

But. I am ready for the best solutions.

+1
source

There is another solution: setting height explicitly on the parent element. For example height: 1% or height: 100% .

0
source

Had the same problem, but in my case, the fix was that the parent had position: relative . As soon as I removed it, the problem disappeared.

0
source

for a fixed position in IE 8 -, DOCTYPE is very important.

one of:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

or

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or

 <!DOCTYPE HTML>

And it is very important that they are on the first line.

0
source

More articles:


All Articles