css hack 浏览器携带自身特有的属性 (二)
css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题。 这里只是分享思路。
举例子:
1 outline,尤其是一些 自带继承特性的属性。这里指的是 隐性的inherited。input获取焦点的背景色,外边框,等等。
2 当图片加载失败的时候,Chrome没有多余的样式,火狐浏览器会 出现 图片加载失败的样式(出现一个 小x )这里就不加载图片了,可以自己试一下。严格来说:这里应该是img 加载问题,不是css可以解决的,但是不同的浏览器出现不同的样式。
具体分析一下情况:
1:前缀的 (这里也是 css3 属性 需要特别注意的地方 )
-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer
@-moz-document url-prefix()
。@-moz-document url-prefix() {
img{ //随便写的,别当真
border:none;
backgrond-color:grba(0,0,0,.2)
}
}
2 : Chrome、Safari等Webkit内核的浏览器的CSS Hack
Chrome、Safari等采用webkit内核的浏览器支持媒体类型查询语句:@media screen and (-webkit-min-device-pixel-ratio:0)
。
@media screen and (-webkit-min-device-pixel-ratio:0) {
img{ //随便写的,别当真
border:none;
backgrond-color:grba(0,0,0,.2)
}
}
解决方法:
说出来有点娇羞:一个reset.css可以解决大部分 我们需要的兼容问题。当然需要自己书写一部分本身自己项目需要的兼容。可以百度搜索reset.css。
但是像我刚才说出的img onerror 这样的问题导致的样式,需要我们特别的注意。
思路:加载404图片,加载error图片。一般我们会默认给出一个加载失败的备用图片。考虑容错,还有许多路要走。
css hack 浏览器携带自身特有的属性 (二)的更多相关文章
- CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.
- web端 css hack(一)
逢10月小长假,几天不敲键盘,浑身难受.也是有时间分享一下自己遇到的css问题.先说一下什么css hack 简单介绍一下css hack: 定义: 一般都是利用各浏览器的支持CSS的能力和BUG来进 ...
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6 ...
- CSS Hack是什么意思
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...
- CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
- 区分各浏览器的CSS hack(包括360、搜狗、opera)
虽然说使用css hack来解决页面兼容性bug并不是个好办法,但是有时候这些hack还是用的着的,比如你接受了一个二手或是三手的遗留界面,杂乱无章的css代码,只在某个浏览器下有兼容bug,而且需要 ...
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
- CSS各个浏览器Hack的写法
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack ...
随机推荐
- POJ3177(无向图变双连通图)
Redundant Paths Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11514 Accepted: 4946 ...
- java 通过System.getProperties()获取系统参数
转自:https://www.cnblogs.com/ksuifeng/archive/2010/09/25/1834416.html 1.java的System.getProperty()方法可以获 ...
- 细说 CSS margin
作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...
- 卡内操作系统COS
https://wenku.baidu.com/view/dbaa94916bec0975f465e2e8.html 智能卡与cos技术简析: http://www.360doc.com/conten ...
- 极客时间_Vue开发实战_汇总贴
视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...
- JavaScript 的基本语法
说明:此类博客来自以下链接,对原内容做了标注重点知识,此处仅供自己学习参考! 来源:https://wangdoc.com/javascript/basic/introduction.html 1. ...
- CentOS6下用yum升级系统最新内核版本
首先当你决定升级内核时,要想清楚为什么升级内核,因为升级内核会带来很多麻烦.所以这种事情能避免就避免 导入 Public Key rpm --import https://www.elrepo.org ...
- python split 与join
1.string.join (saq):以string 为分隔符,将seq中所有的元素(字符串表示"")合并成一个新的字符串 2.string.split(str="&q ...
- npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1
internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...
- tar,jar和war都是什么
jar 即Java Archive,java的类进行编译生成的class文件,通常是开发时要引用通用类,打成包便于存放管理. 但如果直接发布这些class文件的话会很不方便,所以就把许多的class文 ...