ie6支持哪些html5标签?

html-css05

ie6支持哪些html5标签?,第1张

IE6是XP系统时代的产品,实在是太老了,并不支持所有HTML5的标签。但是可以用第三方的插件可使得IE6浏览器兼容HTML5。比如gg的html5shiv。可以把HTML5的新元素转换成IE6认识的内容。使用方式也很简单,只需要在你的head中调用这段代码就行了:

<head>

<!--if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

今天发现项目首页在IE6下乱了。发现是样式没有调到。于是开发找原因。在svn的提交日志中发现那个样式文件的所有有中文的地方都有改动。但显示出来都是一样的。于是找到最后提交的那个同事。发现他机子上此文件的编码为GBK。不是默认的UTF-8。再发现自己机子上的样式文件为乱码。

于是搜了下发现如果下列的问题。将导致IE6下读取CSS样式出现问题。

1) CSS文件编码问题。 可以尝试将文件编码改变为UTF-8格式,或直接在文件中导入@charset "utf-8"

2) 检查CSS文件是否有正常结尾符号,有时也会因为没有正常结尾导致出现一些样式问题;

3)检查HTML头部的文档声明。

为啥在chrome下可以。单独在IE6下不行的原因:

在IE6中,默认引入的文件(JS/CSS)和页面的编码是一致的。在IE6+以上的浏览器中,一般浏览器会自动识别每个外部文件的编码并进行解析;

解法:根据对于的问题去解决!

当我们在css样式设置为html {overflow-y:auto}时,在ie7以上版本应用时不会有问题,可是在ie6下就会发现垂直滚动条出现会引起横向滚动条出现。究其原因是在ie6下,当内容过多出现垂直滚动条时,此时页面的宽度为其本来宽度加上滚动条的宽度,导致页面宽度超过100%,而出现横向滚动条,在ie7+浏览器中,会自动的识别滚动条,页面宽度为内容的宽度加上滚动条的宽度等于100%,而不会出现滚动条,这相当于是ie的滚动条bug(纯属个人见解,不对的地方还请指出,共同学习交流)。

解决上述出现的问题有以下几个方案

方案一:添加html{overflow-y:hidden}样式

这种方案仅仅是把出现的横向滚动条隐藏了,并没有解决根本问题,而且还会出现不想要的效果(横向多余的内容会被隐藏掉),这是一种不好的解决方法。

方案二:添加html{overflow-y:scroll}

添加这个样式,当页面内容超过页面高度时,会正常的显示垂直滚动条,而且不会出现横向滚动条,看起来是我们要的效果;可是页面内容不足以出现垂直滚动条的时候,我们会发现页面的右边会出现一条置灰样式的滚动条位置,这个看起来并不美观,不是我们想要的效果。不过最起码已经开始接近我们想要的效果了,比起第一种解决方案,他的效果还是好的。

方案三:通过jQuery实现

单纯的css样式已经不能满足我们的需要,通过第二个方案我们可以想到一种比较好的解决方法,我们可以判断当页面高度需要垂直滚动条时,把页面样式设置为overflow-y:scroll;这样是不是就会达到我们想要的效果,事实证明完全是ok的,

$(function () {

    //解决IE6下 页面出现横向滚动条

    if ($.browser.msie && $.browser.version == "6.0" && $("html")[0].scrollHeight > $("html").height())

        $("html").css("overflowY", "scroll")

})

以上就是对页面出现横向滚动条的解决方法,只是针对我目前遇到的情况,方法肯定还有很多,以后有时间再慢慢补充,,,

(有人说谷歌浏览器有相对应的解决方法,时间有限,没去研究,在此标记下)

转自:博客园《IE6下出现横向滚动条问题的解决方案》--鱼爱水