html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题
这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题,如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,非常方便。
IE6里DIV错位的问题
采用”FLOAT:LEFT“的DIV在IE8、IE7、都没问题,IE6下却向下移动,出现空白。这是因为,IE6采用的内核默认把DIV之间的距离增加了3~5个PX,所以,试试是将下移的DIV的STYLE里增加"margin-left:-5px;"或者更小。
解决IE7、IE8样式不兼容问题
◆方法一、要在页面中加入如下HTTPmeta-tag:
只要IE8一读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
◆方法二、针对整个网站,在IIS中加入如下描述符就可以有相同的效果,当然这么做范围更广。xmlversionxmlversion="1.0"encoding="utf-8"?>
< span>customHeaders>
< span>httpProtocol>
< span>system.webServer>
< span>configuration>
解决IE6、IE7、IE8样式不兼容问题
现在我们在做网页的时刻总是要考虑一些浏览器之间的兼容问题。近期在做一个短信平台的项目。在项目的开发过程中让我遇到了一件头痛的事情就是IE7与IE8不兼容。后面想了许多办法得以解决。现共享如下:
如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
CODE:
解决Firefox、IE6、IE7的css样式兼容问题
做主题最麻烦的就是CSS样式兼容问题,由于各浏览器对ccs的不同解释,造成本来IE7可正常显示,但到了Firefox、IE6等其它浏览器上,却出现错位、下沉等问题,只得在Firefox、IE6、IE7之间不停的切换调试,汗…最近又有两款浏览器加入googleChrome和IE8,某个浏览器一统天下看来是没希望了,只能尽量克服兼容问题。找到一篇解决兼容问题的文章,还是很有效的。
1.针对FirefoxIE6IE7的CSS样式
现在大部分都是用!important来hack,对于IE6和Firefox测试可以正常显示,但是IE7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样:#1{color:#333;}/*Moz*/
*html#1{color:#666;}/*IE6*/
*+html#1{color:#999;}/*IE7*/
那么在Firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2.css布局中的居中问题
主要的样式定义如下:body{TEXT-ALIGN:center;}
#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}
说明:
首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。
3.盒模型不同解释.#box{
width:600px;
//forIE6.0-w\idth:500px;
//forff+IE6.0
}
#box{
width:600px!important
//forff
width:600px;
//forff+IE6.0
width/**/:500px;
//forIE6.0-
}
4.浮动IE产生的双倍距离
#box{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的的效果diplay:table;
5.IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:#box{width:80px;height:35px;}html>body#box
{width:auto;height:auto;min-width:80px;min-height:35px;}
6.页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到标签下,然后为div指定一个类:
然后CSS这样设计:#container{
min-width:600px;
width:expression(document.body.clIEntWidth<600?“600px”:“auto”);
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7.清除浮动.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者.hackbox{
clear:both;
}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非IE浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{
content:“.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
8.DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html#left{
margin-right:-3px;
//这句是关键
}
HTML代码
< span>DIV>
< span>DIV>
< span>DIV>
9.属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin或paddign时。例:
p对象中的内容< span>p>
< span>div>
CSS:
#box{background-color:#eee;}
#boxp{margin-top:20px;margin-bottom:20px;text-align:center;}
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别_,其他不能
IE6能识别*,也能识别!important,但不能把它识别成优先
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
文章来源:Div-Css.net设计网参考:http://www.div-css.net/div_css/topic/?id=7633
【编辑推荐】
【责任编辑:程华权 TEL:(010)68476606】
点赞 0
html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题相关推荐
- html不支持ie7,解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片主要 ...
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的 IE 永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体 ...
- 伪元素(3)-解决IE6/IE7/IE8不支持before,after问题
第一种解决方式参考: http://www.wozhuye.com/index.php?m=content&c=index&a=show&catid=3&id=316 ...
- ie6,ie7,ie8 css bug兼容解决记录
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1 ...
- html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表
IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观.本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版 ...
- div+css 完全兼容ie6 ie7 IE8 IE9 和firefox方法
简单方法: IE6,IE7,IE8,FF的兼容方法(2) 浏览器兼容代码: 浏览器 符号 IE6 IE7 IE8 FF * !important _ \9 *html *+html 说明:代表能识别: ...
- IE6/IE7 /IE8/Firefox/Chrome/Safa…
最近装了新的chrome, 据说用起来不错,不想昨晚随便用了一下, 发现之前做的一个在ie和ff下显示正常的页面居然在chrome里显示有问题, 一直以为兼容ff,其他这些标准浏览器都没什么问题,看来 ...
- php7 css样式不支持,div错位/解决IE6、IE7、IE8样式不兼容问题_html/css_WEB-ITnose
放到 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientW ...
- [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
最新文章
- C++ 虚函数和纯虚函数的用法
- Cocos-2d 坐标系
- laravel框架的基础学习路线(不带composer的)
- 网站哪些细节做不好会导致网站的跳出率过高?
- C# 给枚举类型增加一个备注特性
- Android Studio上手,基于VideoView的本地文件及流媒体播放器
- NTP时间服务器实现Linux时间同步
- python自动化入门操作文档,写得如此清晰明了,忍不住让人点赞
- PyQt5学习笔记02----初探Qt Designer 设计师
- scrapy 图片url 转base64_一文快速掌握 scrapy 爬虫框架
- C#LINQ方法操作-Max求数组集合中最大值
- bzoj 2962: 序列操作
- asset文件夹路径 unity_Unity资源常用目录和路径大总结
- HTML+CSS大作业 (水果之家10个网页)
- 讯飞AIUI平台语义理解配置全攻略——以Android版AIUI SDK为例
- cephadm全功能安装Ceph Pacfic
- 关键业绩指标(KPI)
- Excel里面输入18位数字,但是显示却是其他的?!请问怎么解决?
- table合并单元格 colspan(跨列)和rowspan(跨行)
- Kafka 核心源码解读【一】--日志模块