min-标签兼容

文章摘自:http://blog.csdn.net/cicada_slough/article/details/43305413

min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)

布局过的人都知道CSS的最小高度min-height是个很有用的属性,它可以让很短的内容也有一个很合适的高度,使页面显得美观。但很可惜IE6不支持这一属性。怎么办呢?我们可以用另外一种方法让IE6也有最小高度min-height属性的效果。

众所周知,如果内容超过元素的高度,那么IE6是会自动增加元素的高度,即使你明确的定义了元素的高度。我们可以利用IE6的这个bug来让IE6也有最小高度min-height属性的效果。

E6对于overflow的特殊实现,给我们实现min-height提供了一个思路,所以产生了以下兼容IE6、IE7、FF浏览器的min-height写法:

mrjin {
    background:#ccc;
    min-height:100px;    /*高度最小值设置为:100px*/
    height:auto !important; /*兼容FF,IE7也支持 !important标签*/
    height:100px; /*兼容ie6*/
    overflow:visible;
}

解释:

1、由于IE6对!important的解释存在bug,所以它只识别height:500px这一句,超过500px后,IE6自身会增加盒子的高度;

2、IE7和其他标准浏览器三句都能识别,虽然定义height:500px,但我们又有了height:auto !important,所以超过500px也能自动增加盒子的高度。

   最大宽度...主流浏览器IE对max-width是不支持的,对这一属性的设置在IE中是无效的。同样的对min-width的设置也是无效的(只能用JS处理)。

时间: 2024-10-12 09:20:44

min-标签兼容的相关文章

H5新标签兼容

WordPress中一些主题是用了新增的H5标签 但是这些标签并不兼容IE 678 观察发现 主题引用了js文件 html5shiv.min.js 解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. 地址: <!--[if lt IE 9]> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <script src="

解决HTML5标签兼容的办法搜集

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

关于hr标签兼容个浏览器的代码

hr标签,相信大家都能熟悉,我们一般用它来产生横线的效果.我们可以对它定义“颜色”.“高度”.“宽度”.“边框”等样式. 在此只讨论“颜色”和“边框”对于不同版本浏览器的兼容性. 颜色: 火狐.IE7+= :通过background-color来指定. IE6-= :通过color指定. 方案:要为hr指定颜色,同时使用background-color和color. 边框: IE7+= :如不指定border:none,那么浏览器默认会为hr加上一定宽度的边框. IE6-= :浏览器默认不会为其

CSS3属性的兼容 什么是弹性和布局

CSS3新特性,兼容性,兼容方法总结 css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?<length>:用长度值设置对象的圆角半径长度.不允许负值<percentage>:用百分比设置对象的圆角半径长度.不允许负值 实例: bo

兼容IE8

由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容工作的时候不仅叫苦不迭.一个项目下来后,倒是收集了一些志于让HTML5兼容IE8的库,还有一些零散的代码和优雅降级的技巧,整理如下.IE8的兼容工作是个大活,这篇文章还不完整,肯定有很多疏漏和不足,望读者能在评论区指正,同时我也会在之后的项目中逐渐丰富这篇文章. 一.HTML5标签兼容方案:html

HTML5上传视频无法播放以及兼容的解决方法

一.视频无法播放原因分析 1.路径不对 <video width="100%" height="100%" controls="controls">   <source src="images/apply.mp4" type="video/mp4"></source>  </video> 在images前面不加斜杠,使用相对路径,不要使用绝对路径 2.视频格式

HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型

现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" height="300px" preload="metadata"> <source src="video/FF4.ogv" type="video/ogg"> <source src="video

IE兼容问题及处理

1.在IE6下,子元素能撑开父级设置好的宽高 2.IE6下的最小高度,高度小于19px的元素在IE6下会被当做19px来处理 解决办法:overflow:hidden; 3.IE6下 不支持1px的点线 4.在IE6下父级有边框,可能会导致子元素的margin值失效 解决办法:触发父级的haslayout 5. 在IE下不写文档声明就会进入盒模型的怪异解析; 盒模型的怪异解析: 怪异盒模型 width=可视宽 content=width-padding-border 6.在IE6下标签兼容:解决

css兼容问题 ie6,7

H5标签兼容 元素浮动之后能设置宽度的话就给元素加宽度,如果需要元素宽度是内容撑开,就给他里面的块元素加上浮动 第一块加浮动,第二块加margin等于第一块元素在IE6下会有间隙问题 IE6下子元素超出父级宽高,会吧父级的宽高撑开 P td h包含块元素的嵌套规则 margin兼容问题 display:inline-block IE 最小高度 IE双边距 li里元素都浮动   li会在ie67 下方会产生4px间隙 浮动元素之间注释内联元素 导致多复制一个文字问题 IE67父级的overflow

整理低版本ie兼容问题的解决方案

CSS hack \9    所有的IE10及之前 *     IE7以及IE7以下版本的 _     IE6以及IE6以下版本的 !important  提升样式优先级权重 1.ie6,7,8对H5标签兼容 页面中引入html5shiv.js,下载地址:https://github.com/aFarkas/html5shiv 2.IE6双边距 当元素浮动后,再设置同方向margin,会产生双边距 解决:增加 *display:inline; 3.IE6最小高度问题 IE6下最小高度19px,想