CSS_解决IE6中min-width问题

最新推荐文章于 2021-01-31 18:29:29 发布

trace332

最新推荐文章于 2021-01-31 18:29:29 发布

阅读量4.4k

点赞数

分类专栏：结构与样式文章标签： ie css html class div border

本文链接：https://blog.csdn.net/trace332/article/details/4152839

版权

结构与样式专栏收录该内容

23 篇文章 0 订阅

订阅专栏

参考资料:http://www.webreference.com/programming/min-width/index.html

IE6中的min-width无效,而实际上,这是一个很好很有用的属性.

怎么解决呢?

参考资料中的方法其实也很麻烦,需要添加两个空div标签.

一个是设置一个大的边框宽度[ border-left: 300px solid #fff; ]

,再使用相对定位与浮动负值(等于边框宽度的值), [ margin-left: -300px;position: relative; ]

并且要使之拥有布局 [ height: 1px; ]

第二个方法差不多,不过是使用补白 [ padding-left: 300px; ]

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>a</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { background: #eee url(rule.gif) 50% 0; color: #000; font-family: "trebuchet ms", "times new roman", times, serif; text-align: center; margin: 20px; padding: 0; } .width { width: 50%; min-width: 300px; margin: 0 auto; text-align: left; background-color: #fff; } * html .minwidth { border-left: 300px solid #fff; } * html .container { margin-left: -300px; position: relative; } /*/*/ * html .minwidth, * html .container, * html .content { height: 1px; } /*/ .width { display: inline-block; } /**/ .content { border: 1px solid #c00; padding: 5px; } .rule { width: 300px; background-color: #c00; color: #fff; margin: 1em auto; } .width1 { width: 50%; min-width: 300px; margin: 0 auto; text-align: left; } * html .minwidth1 { padding-left: 300px; } /*/*/ * html .minwidth1, * html .layout { height: 1px; } /**/</style> </head> <body> <h2>Step 8</h2> <div class="width"> <div class="minwidth"> <div class="container"> <div class="content"> <h2>{width:50%; min-width:300px;} includes IE5+</h2> <p>This div has a min-width of 300px and a width of 50%. <span class="lf"></span> <span class="rf"></span> The width can be any percentage and the min-width a px or em value. </div> </div> </div> </div> <div class="rule">this is 300px wide</div> <p>Transparent version:</p> <div class="width1"> <div class="minwidth1"> <div class="layout"> <div class="container"> <div class="content"> <h2>{width:50%; min-width:300px;} includes IE5+</h2> <p>This div has a min-width of 300px and a width of 50%. The width can be any percentage and the min-width a px or em value.</p> </div> </div> </div> </div> </div> <div class="rule">this is 300px wide</div> </body> </html>

trace332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_解决IE6中min-width问题

参考资料:http://www.webreference.com/programming/min-width/index.html IE6中的min-width无效,而实际上,这是一个很好很有用的属性. 怎么解决呢? 参考资料中的方法其实也很麻烦,需要添加两个空div标签. 一个是设置一个大的边框宽度[ border-left: 300px solid #fff;
复制链接

扫一扫