| VB 源码 | VC 源码 | ASP源码 | JSP源码 | PHP源码 | CGI源码 | FLASH源码 | 素材模板 | C 源程序 | 站长工具 | 站长教程 |

网页设计

网站策划
网页设计

本类阅读TOP10

·经典网页设计欣赏
·Flash Loading制作全接触
·用Flash制作简单闪光字
·下拉菜单全攻略(Javascript篇)
·PhotoShop热键大全
·下拉菜单全攻略(DW篇)
·网页效果集合
·哈利波特书封面设计欣赏
·Flex 入门教程
·一流的设计师,一流的PHOTOSHOP教程

站内搜索

10个技巧帮你搞定IE6

虽然说IE8已经来了,并且表现不错。8个小时突破1200W下载,远远地超过24小时下载800W的firefox。但对于整个互联网,IE6仍然是用户最多的浏览器。暂不说IE6怎样,把Web的表现做得更好,既是一种责任,也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何,就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems,学会这10个方法,你将可以解决大部分IE6出现的问题。

ie6

1. 使用 DOCTYPE

你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

或者, XHTML页面的!DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

你最不想看到的是,IE6进入怪癖模式 - 其实已经够多怪癖了。

2. 设置position: relative

设置position:relative解决了不止一个问题,特别当需要设置对齐的时候。很明显,你需要明白的一点是,绝对定位是相对来说的。说不定,因为你没有设置,而不知道东西都飞到那去了。比如,你设计了每篇文章前都有一张图片,最后,你发现,只有一张图片在页面上,或许,是他们重叠了。

3. 给浮动元素设置 display:inline 值

这源于著名的IE6双倍外边距BUG,例如,你给一个DIV设计了浮动,并且,设置了margin-left:5px;,在IE6中很可能就是margin-left:10px了,这里,给浮动元素设置 display:inline;,即可解决问题。

4. 为元素设置 hasLayout

很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决。(如果你不知道hasLayout是什么,请看这里

最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。设置一个具体的值是推荐的,但有时候并不一定知道高度多少,这里,你可能会用到height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。

5. 解决字符重复出现的问题

复杂的布局可能导致一些浮动元素里面的文字,出现在清理浮动位置的下面。这是一个奇怪的问题,下面这此可以帮你解决:

  • 确保浮动元素设置了 display:inline;
  • 在浮动元素中使用 margin-right:-3px;
  • 在浮动元素的最后一个元素后加上一个IE注释,例如: <!--[if !IE]>把你的注释放这里 <![endif]–>
  • 在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)

UPDATE: 最简单的方法是删除掉所有注释。

你可以到positioniseverything.net中查看更多关于这个的解释。

6.只在<a>标签中使用hover,IE6只支持<a>标签显示hover样式

当然,你还是可以通过JS来解决这个方法。但是, 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。

7. 使用!important 或高级选择器来区分IE浏览器

比如min-height可以避免使用CSS来实现对IE的兼容。

#element { 
min-height: 20em; 
height: auto !important; 
height: 20em; /* 让IE6显示这个高度 */ 
}

IE6 并不能正确地识别min-height,可以设置固定的高度,让IE6解板为20em。即使如此,它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器:

#element { 
min-height: 20em; 
height: 20em; 
} 
/* 忽略 IE6 */ 
#element[id] { 
height: auto; 
}

8. 避免按比例确定的尺寸

比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important,例如:

body{ 
margin: 2% 0 !important; 
margin: 20px 0; /* IE6 可读 */ 
}

9. 尽早测试,经常测试

别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。(至少我自己深有体会)

10. 重构你的代码

很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的,没有一边制作,一边测试IE6的表现,导致最近有很多奇怪的问题,因为布局比较复杂。后来,干脆重构代码。用了2两。我想,如果是想解决方法,或许2天都搞不定。(via)




相关文章
  • 淘宝联盟阿里妈妈:劣币驱逐良币
  • 数学是成就卓越开发人员的必备技能
  • “网站内部导航”的变革时代开始了
  • 网页设计原则理念以及实战经验技巧
  • 战胜免费
  • Google Analytics报告解读
  • 互联网的网络营销模式分析
  • 个人BT下载网站面临集体终结
  • 七种说服人们购买你商品的方法
  • B2C网站运营策划的原则
  • 问答网站推广技巧
  • 网站社区运营的十大原则
  • 英文网站推广运营技巧
  • 四个大佬的互联网十年
  • 大规模网站架构技术原理透析
  • 高并发高流量网站架构
  • 5种方法立刻写出更好的CSS代码
  • 10个可用性噩梦
  • 前端开发大众手册(包括工具、网址、经验等)
  • 43个你应当避免的Web设计错误
  • 相关软件

  • OpenGL三维图形程序设计  
  • 设计人生企业建站系统 1.0
  • 聂枫设计全站系统 2.0
  • DOS保护模式下汇编程序设计  
  • 交互式窗口程序设计软件  
  • 文本窗口设计工具(可生成。COM文件)  
  • 冒险游戏的编写和下拉式菜单的设计  
  • Clipper锯齿边缘阴影框的设计  
  • 屏幕设计的 C 语言源程序  
  • 内存驻留程序设计软件  

  • 下载首页关于我们广告服务联系方式常见问题隐私声明法律条款本站声明下载帮助发布软件站点地图谷歌卫星地图