[翻译]兼容ie6的十条修复
http://www.sitepoint.com/blogs/2009/03/06/10-fixes-for-ie6-problems/
作者:Craig Buckler 翻译:清
我们知道ie会在一段时间内仍然流行,但是我们仍然可以支持浏览器并且避免hacks和条件css吗?这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。
1、使用一个声明
你必须经常在html网页头部放置一个声明,推荐使用严格的标准。例如
或者xhtml使用
最后你需要是ie6进入兼容模式,这已经足够兼容的了。
2、使用position: relative
设置一个标签position: relative可以解决很多问题,特别是曾经有过看不见的经历或者奇怪布局的框架。明显的,你需要小心,绝对位置放置的子元素是否都参照找到新位置。
3、为浮动元素使用display:inline
浮动元素会有一个著名的ie6双边距margin bug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题,尽管它不是必需的,但是css仍然有效。
4、设置元素启动hasLayout
大部分ie6(ie7)的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是ie内置的设定,确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果,设置hasLayout也是必须的。
5、修复重复字符的bug
复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法,部分是理想的,并且一些测试和出错是必须的。
a、确保浮动元素都使用:display:inline;
b、最后一个浮动元素使用margin-right:-3px;
c、在浮动对象最后一个元素后使用一个条件注释。例如这里输入注释…<![endif]
d、在容器内的最后使用一个div空标签(它也必须设置90%宽度甚至更小)
6、使用a标签完成可点击和hover原理
Ie6只支持a标签的css定义hover效果
你可以使用它去控制javascript启动的widgets,使得他们仍然保持键盘操作。这里有个二择一的问题,但是a标签是所有解决方案中最可靠的。
7、使用!important,或是高级选择符替代ie特定代码
在外置的css文件里,放弃凭借传统的hacks和条件判断,使用有效的css代码去针对ie6仍然是有可能的。例如:最小高度可以使用一下定义。
#element {
min-height: 20em;
height: auto !important; /* [...]
- 聚合来源
-
- 携程UED
- 帕兰映像
- caoz - 曹政
- Hmilyld - 胡志刚的Blog
- Angelk7
- Riix - 熊睿
- 迅雷UED
- 35UI团队
- 阻击者 - 邱松
- 金蝶UED
- Blueidea Xml News Aggregator
- 163 UED Team
- PPQ's Sky
- 灰灰菜的blog
- 凉爽的blog
- Simple.Style
- Liuyang | BlogLife
- WE17 | 我们一起
- 李方明 - mixfog
- kidaubis' blog
- Daxiong's Note
- Sluke的夹生饭
- Sin.CS 的 Blog - kingcms
- Clinch's Blog
- Moying - 鸡腿日志
- 邱南奇_Qiunanqi.com
- 莫丢 一滚天地开
- 阿飞@1982Y.com
- 碳酸氢钠|NaHCO3^Web Home
- 墨@猫一样的懒女人
- L4EVER.CN 简单快乐
- tension's blog
- 幻想曲.Net
- 千鸟志
- JJ.Ying's GUI World
- 4ngel's blog
- 膘叔 簡單人生
- 龙龙 钟爱梦欣
- 资源搜索
- 24小时热门
-
- 一周热门
-