div+css 布局下兼容IE6 IE7 FF常见问题
所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)
height: 100px;
_height: 100px;
*height: 100px;
*+height: 100px;
height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.贴上代码:
8、IE6的双倍边距BUG
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; ; height:200px; border:1px solid red }
</style>
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
9、为什么FF下文本无法撑开容器的高度?
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设 置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
div { height:auto!important; height:200px; min-height:200px; }
兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵!
程序代码
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;
height:100px;
*height:120px;
_height:150px;
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
然后CSS这样设计:
min-width: 600px;
width:expression(document.body.clientWidth < 600? “600px”: “auto” );
}
display:table;
//将对象作为块元素级的表格显示
}
clear:both;
}
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
p[id]{}div[id]{}
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
margin 或paddign 时。例:
<p>p对象中的内容</p>
</div>
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */
/**//*/
@import "ie5mac.css";
/**/
Only IE
所有的IE可识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别
转载于:https://www.cnblogs.com/hnyei/archive/2011/10/14/2211131.html
div+css 布局下兼容IE6 IE7 FF常见问题相关推荐
- CSS完美兼容IE6/IE7/FF的通用方法 ~!!!
http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法 作者:w3pop.com 翻译 ...
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16 作者:佚名 我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
- CSS兼容IE6,IE7,FF的技巧(COPY来的,还没看)
一.CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用. 1, !important 随着IE7对!important的支持, !important 方法现在只针对 ...
- CSS兼容IE6,IE7,FF的技巧
一.CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用. 1, !important 随着IE7对!important的支持, !important 方法现在只针对 ...
- DIV CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- [转]CSS完美兼容IE6/IE7/FF的通用hack方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- CSS完美兼容IE6/IE7/FF的通用方法
一.CSS HACK以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记 ...
- div+css 布局浏览器兼容
第一次写div + css 的站点,进度相当的慢,而且项目也赶得挺急的,整个人被操劳的很累,做了几天后我把所学到的,一些技巧和网上搜罗 到了综合下发出来,希望对做设计的朋友有帮助! 1.为什么在不同的 ...
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
2019独角兽企业重金招聘Python工程师标准>>> <style type="text/css"> body{ background-image: ...
最新文章
- 为docker设置国内镜像【转】
- 吴恩达《序列模型》精炼笔记(2)-- NLP和Word Embeddings
- Cpp / shared_ptr 配置删除器的方法
- C语言学习之将一个二维数组的行和列互换,存到另一个二维数组中
- Solr 访问 403 错误
- Meanshift 均值飘移实现图像聚类 MATLAB实现(4)
- redis高级命令2
- composer笔记
- 不说“安全”俩字,如何证明自己是做安全的?
- OpenCV2+入门系列(一):OpenCV2.4.9的安装与测试
- mathtype注册表
- Controller数据导出Excel 详细教程
- 使用Flask在Raspberry Pi上构建物联网服务器
- Mac 自带 输入法 无法打出 一些汉字 生僻字 的问题,解决办法。
- Win10 BIOS改AHCI蓝屏无法启动的 两个解决方法
- 椭圆机会不会练出肌肉腿
- 基于Halcon学习的一维码识别【十三】ean13.hdev
- C++24小时制转换成12小时制
- Fortran写nc文件nbsp;f90nbsp;netcdf
- 汉语言文学研究生C,汉语言文学专业学生考研要考什么科目
热门文章
- 想Get热搜同款?GitHub开源神器让父亲重返18岁!
- CV新赛事:口罩佩戴检测
- 基于OpenCV与Dlib的行人计数开源实现
- 分享几个Python小技巧函数里的4个小花招
- 新手如何开始学习3D建模?美术基础重不重要?
- 【TensorFlow】TensorFlow从浅入深系列之四 -- 教你深入理解过拟合问题(正则化)
- appbarlayout 折叠后 不允许滑动_还在纠结要不要建阳光房?看看可折叠阳光房,或许你就能做选择了...
- numpy.random随机数模块常用函数总结
- clion windows安装
- caffe 图片数据的转换成lmdb和数据集均值(转)