• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS Hack详解

CSS Hack详解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,Hack等相关知识,佚名 希望在学习及工作中可以帮助到您

摘要:
      在我们制作页面时CSS hack由于不同的浏览器,比如Internet Explorer,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

  CSS Hack大致有3种表现形式,属性级Hack、选择器Hack以及IE条件Hack

注意:尽可能减少对CSS Hack的使用。

原理:
  由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

实际应用:
选择器:
  
语法:
       <hack> selector{ sRules }

说明:
 选择不同的浏览器及版本
通常如未作特别说明,所有的代码和示例的默认运行环境都为标准模式。
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。
简单列举几个:



取值:
<keywords>

  if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

     是否:
指定是否IE或IE某个版本。关键字:空
     大于:
选择大于指定版本的IE版本。关键字:gt(greater than)
     大于或等于:
选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
     小于:
选择小于指定版本的IE版本。关键字:lt(less than)
     小于或等于:
选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
     非指定版本:
选择除指定版本外的所有IE版本。关键字:!
<version>
      目前的常用IE版本为6.0及以上

说明:
用于选择IE浏览器及IE的不同版本
if条件Hack是HTML级别的(包含但不仅是CSS的Hack,可以选择任何HTML代码块)
如不想在非IE中看到某区域,可这样写:


上述p代码块,将只在IE中可见。

if条件6种选择方式的使用示例(下述代码中被条件注释包含的HTML代码块也可以是link标记):
是否,示例代码:


在上述代码中,只有IE浏览,才能看到应用了test类的元素是红色文本。

大于,示例代码:


在上述代码中,只有IE6以上,才能看到应用了test类的元素是红色文本。

大于或等于,示例代码:


在上述代码中,只有IE6以上(含IE6),才能看到应用了test类的元素是红色文本。

小于,示例代码:


在上述代码中,只有IE7以下,才能看到应用了test类的元素是红色文本。

小于或等于,示例代码:


在上述代码中,只有IE7以下(含IE7),才能看到应用了test类的元素是红色文本。

非指定版本,示例代码:


在上述代码中,除IE7以外的IE版本,都能看到应用了test类的元素是红色文本。

属性级:
    语法:
        selector{<hack>property:value;}或者selector{property:value<hack>;}

    取值:
        _:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。
        *:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高
        \9:选择IE6+,可以区别所有IE和FireFox。
        \0:选择IE8+和Opera
        [;property:value;];:选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则
                [;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。
     注意:!important并不是一个hack手段,他是被用来改变css的优先级的,因为ie6是不识别!important,所以就被拿来当做css hack的一种,这是错误的。
    说明:
    选择不同的浏览器及版本
  浏览器优先级别:FF<IE9<IE8<IE7<IE6,CSS hack书写顺序一般为FF IE9 IE8 IE7 IE6
一些CSS Hack由于浏览器存在交叉认识,所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子:
如想同一段文字在IE6,7,8显示为不同颜色,可这样写:


c

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS first-chjld伪类属性匹配一个序列的第一个元素
  • 2017-08-06深入解析CSS的display:inline-block属性的使用
  • 2017-08-06css 半透明 让IE6支持png图片半透明解决方法
  • 2017-08-06CSS 字体属性font相关的用法
  • 2017-08-06让DIV块在页面的某个位置固定的css代码
  • 2017-08-06CSS3 animation实现简易幻灯片轮播特效
  • 2018-01-28CSS选择器学习
  • 2017-08-06请保留超链接的outline属性
  • 2017-08-06简单的二级菜单导航实现css代码
  • 2017-08-06纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS中的边界margin的取值为负值说明
    • 纯CSS改变webkit内核浏览器的滚动条样式
    • CSS网页布局25个实用小技巧
    • 用CSS实现文本左右对齐且首行缩进的代码
    • CSS中的before和:after伪元素使用详解
    • 解决纯css写三角形在firefox下的锯齿问题
    • IE bug input 外层浮动的边距问题
    • 在css3中background-clip属性与background-origin属性的用法介绍
    • css常用浮出层的写法及实例
    • 基于display:table的CSS布局让HTML元素和像table一样

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有