DIV+CSS 在IE6和IE8的兼容问题。
您好:很高兴为您回答
兼容性问题一般的解决办法是通过JS+CSS来解决,但是因为每个人编程习惯不同,所以不可能有统一的方式来处理。
现如今市面上最好的解决办法是应用框架类CSS来解决兼容性问题,bootstrap框架来编写HTML网页就可以解决兼容性问题。
不然只能根据浏览器的判断来加载不同的CSS来处理兼容性问题。
在头部加上这种代码,来通过浏览器的类型加载不同的CSS和JS处理
解决兼容IE6\7\8不支持html5标签的几个方法:
1、javascript: document.createElenment("......")
IE6\7\8不支持的部分原因是,它们不认为footer是一个有效的html标签。那么我们把它“制造”成一个标签不就行了吗?最直接的办法当然是,javascript 的方式创建:document.createElenment("......")!
代码如下:
(function(){
var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
len=element.length;
while(len--){
document.createElement(element[i])
}
})();
这只是简单创建几典型的html5标签,让它们在IE6\7\8可以成为标签。
有人已经写了一个完整的js文件,你只需要引入既可,像这样:
也有写作
html5shiv和html5shim的区别只有"m"和"v",没有其它区别!当然这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that's it."
这里要做一个特别的说明:就是IE特有的注释判断:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同
因为IE9虽然支持html5标签,但支持的不是很完整,所以,也可以写"lte",这取决于你的选择!
当然,不要忘了指定新建标签的display属性,大多情况下希望标签是block的:
代码如下:
header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}
2、嵌套标签的方法
其实说白了就是在,语义化的html5标签内嵌套div等可用标签,然后只给div写样式,我是不赞成这样的写法的。这样做还不如,给标签一个有语义化的id或者class!
代码如下:
body > * .section {
color: #ff0;
}
section .section { color: #f00;
}
内容测试...
但如果类似于这样的结构,用用也无防:
代码如下:
3、IE条件注释
代码如下:
......
再看一遍IE特有的注释判断:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! : 就是不等于的意思,跟javascript里的不等于判断符相同
相信大家都明白,这是怎么回事!这是一个更加蛋疼的办法!大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。
4、使用xmlns定义文档的命我空间
xmlns即是XHTML namespace的缩写,也就是所谓的“命名空间”。与DOCTYPE声明一样,xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是,在HTML文档是不存在xmlns的,我们平常所见到的xmlns都是出现在XHTML文档中的。
这是xhtml原有的命名空间,到了html5以后被简化了,。
来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间,并使用了含有namespace前缀的元素,例如:
代码如下:
:html5这个前缀并不是一个标准的写法,你也可以用其它字符代替:hl5也是可以的。有了前缀之后,IE会识别新的元素,从而可以应用样式。在其他浏览器中一样有效,那么最后就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法很明显有个缺陷:必须在HTML文档中使用XML格式的命名空间,同样也需要在css中这么做:
代码如下:
html5\:section {
display: block;
}
那么对js的兼容性设置?下面是个测试deml
代码如下:
;html5
html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; }
window.onload = function(){
alert(document.getElementById("test").innerHTML + "---id")
alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName")
alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写")
}
内容
测试结果,IE6\7\8均测试通过,但fixfox和chrome里只有id能获取到,所以这种方法同样不是一个可取的方法!
我搜了一个,这里只说现在主流的几个,(IE6,IE7,IE8,FF)其它的先不管
1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />
2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px
3.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果,6 e" Z+ e% |8 G# |
4.很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*、&,¥,#,@,—,+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/
5.有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6. 再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:1. 一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。-
7.扩展:如果我想在设计的时候,实现IE6,IE7,FF下出现三种不同的效果,比如IE6下背景红色,IE7下蓝色FF下绿色,这里,我自己试过,可以,用兼容的方法(注意顺序,可以好好理解一下)。7 L& t- o7 k- a1 I
background:red;/*FF里显示的红色*/
+background:blue !important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
在这里,我想说一下,虽然兼容给你带来很多郁闷,让人心烦,但同时,在你做多了后,你会发现,兼容有时候会满足你很多不好达到的效果,就像最后一个,要做那种效果,不用兼容的方法,那你就JS去吧,JS还得想想FF和IE下的不同,当然,JS的兼容,我也不会,我没去研究过。以后的事,先把CSS+DIV学熟再说。
多做,做练,始终把盒子模型放在心中,才会熟练,才会运用自如,才会在做的时候,自然而然就知道哪里会有兼容问题,直接在测试前就解决掉那些最常见的兼容问题。
你把你写的 发给我看下吧 我给你解决 复制那些没用的 没什么效果 qq258949722
首先,调试浏览器兼容性问题的顺序为:FF——>IE8——>IE7——>IE6(我们公司只做FF和IE的兼容,所以我只说这些的。)
大致情况下,FF不出问题,IE8就没有问题了。
区分IE6,IE7,IE8的代码为:
.classname{
color:#f00 \9; /*符号\9为IE6,IE7,IE8可以识别,即区分IE和非IE浏览器*/
* colo:#0f0; /* 符号“*”只有IE7和IE6可以识别*/
_ color:#00f; /*符号“_”只有IE6可以识别*/
}
注意书写顺序,就可以区分出来IE8,IE7,IE6!!!
但是,代码写的好的话,一般只有IE6需要调整,即一般只会用到符号“_”
废话不多说了,希望对您有所帮助。
他们有多重兼容问题,不知道你说那种
泊蓓先嗪: DIV+CSS解决IE6,IE7,IE8,FF兼容问题 我搜了一个,这里只说现在主流的几个,(IE6,IE7,IE8,FF)其它的先不管1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了2....
清水县13742054235: DIV+css,在IE6和ie8里相差一像素的兼容,怎么做? - ?
泊蓓先嗪: 用下划线“_”来定义你希望在IE6里面的效果就行了,例如一个CLASS为test的div在IE8里面的高度是200px,到了IE6高度多了一个像素,实际上应该定义它高度为199px,那么CSS就可以这么定义:.test {height:200px; _height:199px;} 这样的话,这个价了下划线的样式就只有IE6可以识别,其他所有浏览器都不会识别它,也就解决了一像素的bug.
清水县13742054235: div+css中IE8和IE6之间的不同?
泊蓓先嗪: IE6与IE8不一样.很多在其它浏览器上好的.在IE6下就错位了或者变形了.建议你专门去看一下专有的IE6BUG方法.至于有虚线.清除一下浮动试试.或者用overflow.hidden(好像是这单词~),至于字体颜色.CSS里看有设置没.或者内容里有没有设置.~
清水县13742054235: 使用DIV+css设计页面,什么版本浏览器最适合??
泊蓓先嗪: 一般做的时候在 Firefox 3 或 Opera 10 测试,因为这些浏览器都是符合 W3C 的,等页面完成后,拿到 IE6 下面微调,目前主流还是 IE6 关于 IE8 就不用考虑了,因为 IE8 也是符合 W3C 的跟 Firefox 显示是一样的.
清水县13742054235: 用DREAMWEAVER做网页,在一台电脑上无论什么分辨率位置都没问题,但是到别的电脑位置就乱了 - ?
泊蓓先嗪: 我可以用专业的精神回答你,如果你是用DIV+css的话,那百分百是兼容性问题,就是说IE7\IE6\IE8不同版本的浏览器看到的效果是不一样的,尤其是在FF浏览器下,更是会让你大跌眼镜,所以DIV+CSS麻烦就在这里,兼容性要一步一步调试的,建议你下个FF浏览器和ietester(集成IE5.5到IE8.0核心,是个不错的测试兼容性的软件),来测试你的兼容性.如果你是用的表格的话,建议你用固定的像素,不要用百分比,这样就会非常稳定,表格一般不存在兼容性问题.另外指出下楼上这位仁兄的错误,DPI一般是指打印分辨率而不是网页中指的像素,网页中的像素使用"px"表示.我是一个做了这行4年的人,以上的内容绝对可以负责. 谢谢!
清水县13742054235: 如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器 - ?
泊蓓先嗪: css样式大部分是兼容ie9+及火狐、谷歌的,至于ie9以下需要有针对性的调整,现在基本已经放弃ie6和ie7了,ie8也是个别单位特殊要求的情况下才做调整的.
清水县13742054235: 怎么能让html5+css3兼容IE6 - 8浏览器? - ?
泊蓓先嗪: ie6-ie8根本就不兼容HTML5,很多HTML5的特性根本就不支持.温馨提示:目前支持HTML5的浏览器有:Firefox、Chrome、Safari、Opera、IE9++,IE9也只是部分支持HTML5.
清水县13742054235: div+css对浏览器的兼容?
泊蓓先嗪: 这个问题只需要多调一下在两个版本之间就可以了.绝对是可以兼容的,你用IE8测,因为软件较多都是向下兼容的!
清水县13742054235: 关于DIV+CSS在IE6,IE7,IE8显示问题,求助 - ?
泊蓓先嗪: 本身你这个写法就是错误的,没改的必要了,重给你写个正规的吧.html部分 实现带链接层 鼠标经过后换图片 这里可以加文字也可以不加,一般如果...
清水县13742054235: 如何使用div+css在dw设计里面和各个浏览器里面都兼容? - ?
泊蓓先嗪: 养成良好的写代码习惯,熟悉各浏览器为什么会不兼容,就能尽量避免,如果初学,那就用css hack, 层错位,大多都是,ie6浮动双倍间距,还有就是要记得清除浮动