最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

兼容ie6 条有效的html和css代码常见问题

日期:09-08    来源:中国设计秀    作者:cnwebshow.com

ie6目前依然是国内用户的主要浏览器,因此作为网页前端开发来说,无可避免必须兼容IE6浏览器,这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。Sp5中国设计秀

我们知道ie会在一段时间内仍然流行,但是我们仍然可以支持浏览器并且避免hacks和条件css吗?这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。Sp5中国设计秀

1、使用一个声明Sp5中国设计秀
你必须经常在html网页头部放置一个声明,推荐使用严格的标准。例如Sp5中国设计秀

或者xhtml使用Sp5中国设计秀

最后你需要是ie6进入兼容模式,这已经足够兼容的了。Sp5中国设计秀

2、使用position: relativeSp5中国设计秀
设置一个标签position: relative可以解决很多问题,特别是曾经有过看不见的经历或者奇怪布局的框架。明显的,你需要小心,绝对位置放置的子元素是否都参照找到新位置。Sp5中国设计秀

3、为浮动元素使用display:inlineSp5中国设计秀
浮动元素会有一个著名的ie6双边距margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题,尽管它不是必需的,但是css仍然有效。Sp5中国设计秀

4、设置元素启动hasLayoutSp5中国设计秀
大部分ie6(ie7)的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie内置的设定,确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果,设置hasLayout也是必须的。Sp5中国设计秀

5、修复重复字符的bugSp5中国设计秀
复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法,部分是理想的,并且一些测试和出错是必须的。Sp5中国设计秀
a、确保浮动元素都使用:display:inline;Sp5中国设计秀
b、最后一个浮动元素使用margin-right:-3px;Sp5中国设计秀
c、在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释…<![endif]Sp5中国设计秀
d、在容器内的最后使用一个div空标签(它也必须设置90%宽度甚至更小)Sp5中国设计秀

6、使用a标签完成可点击和hover原理Sp5中国设计秀
Ie6只支持a标签的css定义hover效果Sp5中国设计秀
你可以使用它去控制javascript启动的widgets,使得他们仍然保持键盘操作。这里有个二择一的问题,但是a标签是所有解决方案中最可靠的。Sp5中国设计秀

7、使用!important,或是高级选择符替代ie特定代码Sp5中国设计秀
在外置的css文件里,放弃凭借传统的hacks和条件判断,使用有效的css代码去针对ie6仍然是有可能的。例如:最小高度可以使用一下定义。Sp5中国设计秀
#element {Sp5中国设计秀
min-height: 20em;Sp5中国设计秀
height: auto !important; /* understood by all browsers */Sp5中国设计秀
height: 20em; /* IE6 incorrectly uses this value /*Sp5中国设计秀
}Sp5中国设计秀
Ie6不支持“min-height”并且错误的将20em重写为“auto”。不过,当内容大于设置的空间时,它会增加它的尺寸。Sp5中国设计秀
另外一个选择是使用高级选择符。例如Sp5中国设计秀
#element {Sp5中国设计秀
min-height: 20em;Sp5中国设计秀
height: 20em;Sp5中国设计秀
}Sp5中国设计秀
/* ignored by IE6 */Sp5中国设计秀
#element[id] {Sp5中国设计秀
height: auto;Sp5中国设计秀
}Sp5中国设计秀

8、避免百分比定义Sp5中国设计秀
百分比在ie下比较混乱。除非你非常小心每个父元素的尺寸,这样就大概可以最后避免了。你仍然可以对其他浏览器使用!important来使用百分值。例如:Sp5中国设计秀
body {Sp5中国设计秀
margin: 2% 0 !important;Sp5中国设计秀
margin: 20px 0; /* IE6 only */Sp5中国设计秀
}Sp5中国设计秀

9、早点和经常测试Sp5中国设计秀
在你的网站和应用程序完成之前,不要放弃ie6的测试。