开发者

Problem with fluid width layout in IE 6 & 7

http://dl.d开发者_如何学Cropbox.com/u/18795563/blog/index.html When resizing the window in IE 6, 7, and 8, This happens: http://img64.imageshack.us/i/aaawz.png/ It's fine when the window is Maximized, But when i try to resize it the sidebar gets pushed down at certain window sizes, It's fine most of time, But i still want to fix the problem.


Try setting your main section width to 74.99%

#main {
     width: 74.99%
}


I see that you have a float right and float left within the sidebar ID. Is this a fix of some sort?

For what it's worth Microsoft is actively trying to rid the world of IE6 as we speak. With only 5% of the world using it, most of whom are in China, you can pretty safely say that it's not necessary to provide the contingency.

Understandably that does not apply to the two more current versions but worth noting.


The best way to do this its with media queries: here is an example of how to solve this, you can try with mobile, table and so on

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />

That's in case of IE doesnt work: http://www.abovethefold.co.uk/blog/2008/09/23/css-ie7-compatibility-and-wordpress-updates/

And even a table that explain thouse issues: http://caniuse.com/css-mediaqueries

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜