针对不同浏览器内核的写法

针对不同浏览器内核的写法:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
现在使用的浏览器类型多种多样,对于浏览器者来说选择性提高了,也提高了竞争性,对于提供更为优质的功能有着极大地作用,但是对于开发者来说却是一个噩梦,在CSS中,有些属性使用W3C的写法在一些浏览器中并不能生效,需要使用单独针对某种浏览器内核的写法才可以,下面罗列一下针对各种浏览器的写法:

-webkit//Webkit内核,例如谷歌和Safari浏览器
-moz//Gecko内核,例如火狐浏览器
-o//Presto内核,例如Opera浏览器
-ms//Trident内核,例如IE浏览器

也就是说在相应的属性名称前面添加上面罗列的前缀就可以了。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div {
  -webkit-border-radius: 30px;
  width: 200px;
  height: 200px;
  background-color: #000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上代码只有在以Webkit为内核的浏览器中有圆角效果,在其他内核类型的浏览器中没有圆角效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=3372

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2025-01-16 09:33:00

针对不同浏览器内核的写法的相关文章

浏览器兼容 各浏览器的Hack写法 [出处:W3CPLUS]

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

各种浏览器的Hack写法(chrome firefox ie等)

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

各浏览器的Hack写法

虽然和大家在一起学习各浏览器的Hack的写法,但我还是要说"Hack对于一位专业的前端攻程师来说并不是一样很好的东西,我力求处理浏览器兼容,尽量不使用Hack写法来处理,除非实在没有办法的情况下,再加以使用."下面我们先来简单的了解一下什么是CSS Hack. Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中

CSS各个浏览器Hack的写法

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

针对各种浏览器css不兼容的写法

/*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/*HTML .SearchBox{ 样式 } 针对Firefox浏览器的内核CSS写法:@-moz-document url-prefix() {.font1 {color:red}} IE8就是自己来调试了.调试一个浏览器,有不合适的地方可以在该内核css中重写对应的方法,只需把不合适的样式重写即

webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop) div p :matches(em, b, strong) {} 使

针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_; (4)\9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例: (1)区别FF(IE8)与IE6 IE7 back

css针对各个浏览器的前缀是什么

css针对各个浏览器的前缀是什么:现在写css3代码的时候,为了实现兼容性,需要在前面加前缀以便兼容对应的浏览器.下面就列举一下前缀的写法: -webkit//Webkit内核,例如谷歌和Safari浏览器 -moz//Gecko内核,例如火狐浏览器 -o//Presto内核,例如Opera浏览器 -ms//Trident内核,例如IE浏览器 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18227 更多内容可以参阅:http

从浏览器内核级别修改layout相关的UI行为

具体说来,有几个不同的代码修改层次. 最底层上layer树硬件合成加速部分的修改,在这一层你可以做到的是让某个图层显示往上或者往下一点,同时页面的JS代码根本不知道这一点:但是要注意,页面交互所依赖的HitTest作用在这一层,一个最顶上的RenderLayer对象最先hitTest测试.所以你要确保不会影响原来的hitTest逻辑,思路就是维护两套索引:用于显示的,和用于model的. 接下来可以修改RenderObject层.实际上,这一层正是layout的核心.你需要了解不同RenderO