1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

实例解析一款针对IE6的CSS hack用法

作者:用户 来源:互联网 时间:2016-03-03 10:27:50

css实例px效果ie6hack针对IE

实例解析一款针对IE6的CSS hack用法 - 摘要: 本文讲的是实例解析一款针对IE6的CSS hack用法, 本文通过实例向大家描述一下IE6的CSS hack用法,我们以一个LOGO为实例,讲解了针对IE6,应用CSS HACK设置有别于IE7和FF的效果。具

本文通过实例向大家描述一下IE6的CSS hack用法,我们以一个LOGO为实例,讲解了针对IE6,应用CSS HACK设置有别于IE7和FF的效果。具体内容请看本文详细介绍,相信本文介绍一定会让你有所收获。

一款针对IE6的CSS hack用法实例

CSS网页布局的兼容性问题一直困扰着大家,其实在51cto.com以前的文章中也有着丰富的CSS HACK与CSS兼容性的文章,只是有些文章可能讲的比较抽象而没有实例化,不便于大家的理解。

现在要讲解的是一个关于IE6的CSS HACK的用法。我们以一个LOGO为实例,讲解了针对IE6,应用CSS HACK设置有别于IE7和FF的效果。我们看下面的HTML代码:

ExampleSourceCode


  1. <h3> 
  2. <ahrefahref="http://www.51cto.com/"> 
  3. 我爱CSSCSSWebDesign-Web标准化Div+css教程</a> 
  4. </h3> 
  5.  

这是一个LOGO元素,应用H3标签进行组织,而LOGO图片则在CSS背景图片中进行定义。
看下面的CSS代码:

ExampleSourceCode 


  1. body{  
  2. margin:0;  
  3. padding:0;  
  4. }  
  5. h3{  
  6. margin:50pxauto;  
  7. width:450px;  
  8. height:60px;  
  9. padding:5px;  
  10. border:1pxdotted#03c;  
  11. }  
  12. h3a{  
  13. display:block;  
  14. width:450px;height:60px;  
  15. text-indent:480px;  
  16. white-space:nowrap;  
  17. background:url(logo.jpg)no-repeat00;  
  18. overflow:hidden;  
  19. }  

设置BODY与H3的样式。将LOGO图片置于H3标签下面的链接元素中。我们打开查看到的效果如下:

实例解析一款针对IE6的CSS hack用法-ie6 hack

我们再打开IE6查看,得到如下的效果:

实例解析一款针对IE6的CSS hack用法-css ie6 hack

 虚线不是那么美观了,显得非常粗糙,这时候我们该怎么办呢?我们可以针对IE6浏览器进行CSS HACK设置,定义在IE6下显示为不同的外观。

我们对CSS代码进行调整:

ExampleSourceCode


  1. body{  
  2. margin:0;  
  3. padding:0;  
  4. }  
  5. h3{  
  6. margin:50pxauto;  
  7. width:450px;  
  8. height:60px;  
  9. padding:5px;  
  10. border:1pxdotted#03c;  
  11. }  
  12. h3a{  
  13. display:block;  
  14. width:450px;height:60px;  
  15. text-indent:480px;  
  16. white-space:nowrap;  
  17. background:url(logo.jpg)no-repeat00;  
  18. overflow:hidden;  
  19. }  
  20. *htmlh3{  
  21. border:1pxsolid#03c;  
  22. }  

请注意最下面CSS代码的写法。应用了选择器“*htmlh3”。而“*html”就是针对IE6及以下浏览器的CSS HACK选择器了。我们再次打开IE6查看,得到如下的效果:

实例解析一款针对IE6的CSS hack用法-ie6 7 8 hack

在IE7与FF中,虚线很漂亮,而在IE6下面,直接以实线显示。

我们可以举一反三,试着定义不同的外边距或背景图片等属性,进行查看。在实际开发中,对这些CSS HACK应该是非常灵活的,大家要多思考,有经验心得,欢迎来52CSS.com与大家分享。
 

【编辑推荐】



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 实例 , px , 效果 , ie6 , hack 针对IE ie6 hack、css ie6 hack、ie6 7 8 hack、ie6 ie7 hack、ie68 hack,以便于您获取更多的相关知识。

ie 6-大神来帮我看看代码有错误没,为什么在ie6中显示错位

...火狐试试。 解决方案四: IE6,IE7 css的inline-block要hack过。。将下面代码放到你的css后面进行hack覆盖 &lt;!--IE6,IE7 css hack,使用IE独有的条件注释--&gt; &lt;!--[if lte IE 7]&gt;&lt;style&gt;.page{display:inline}&lt;/style&gt;&lt;![endif]--&gt; ...

不同版本IE使用不同css(css条件注释语句用法)_CSS/HTML

... 代码如下:                             DIV IF条件实例                  你正在使用:                                     说明:如果你的浏览器版本为多少即会显示IE多少,针对IE6-IE9实验     

[HTML/CSS]关于兼容IE 火狐 google 等一系列浏览器的代码

...设计师们的是伤不起啊,由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。  CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头...

使用autocomplete实现google下拉框

...,重新进行查询(调用其内部的onChange函数),这里主要针对firefox而言,因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码: .bind("i...

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

...实战-- -- Ja vaScript 、 j Q u e r y 、 HT M L 5 、 N od e.js 实例大 全】 JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1 3.2 照片加载与定位 根据功能设计,可以先写好 HTML 结构基础,再配好 CSS 做出大致效果,最后用 JavaSc...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备