css透明度的一些兼容测试
前言
网站丢给了外包公司来弄,但是老外写css的时候似乎没有考虑到国内的浏览器市场,于是只用了opacity
这个属性来写,当IE8-的浏览器访问的时候,浮动层就像一块大黑斑药膏贴在哪里。很显然,婀娜多姿的模特被黑色药膏挡住了,用户完全感觉不到药膏下的她是有多么秀色可餐,因此也没有点击“性趣”去点击这条新闻了。所以必须来修改,让婀娜多姿的图片有种朦胧美。
我们希望起码IE7+的效果都是这样
这只狗有点丑,它在微博上求助各路PS大神,请它玩坏
代码进行时
HTML代码如下:
<li> <img src="" alt="" /> <p></p> </li>
css代码如下
.item li { position: relative; width: 240px; height: 180px; } .item li p { background-color:#000; opacity: .8; background-color: rgba(0, 0, 0, 0.8); color: #fff; position: absolute; bottom:; left:; }
貌似我们都习惯用了opacity
这个属性来写透明度,所以当我们这么写的时候以为是对的,但其实IE8-的效果如下:
于是找到了相关opacity
的资料,国内的w3c对其解释:设置元素的不透明级别,但是国外的w3c对其的解释:CSS Image Opacity / Transparency,这个属性主要是针对图片来设置的透明度,而很少对于某一个元素整体进行不透明度的处理。对此,w3c对其的解释是:应用此属性的子孩子不会继承该属性值,但是其会影响到整个元素所处的区域透明度,包括它的内容。因此此处用opacity
显然是不明确的。
css透明度的一些兼容测试的更多相关文章
- CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
- 【总结】CSS透明度大汇总
近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...
- 纯css实现省略号,兼容火狐,IE9,chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微软官方网站线上兼容测试平台-Browser screenshots
前端开发时最不想做的就是在不同浏览器.平台和分辨率测试网页显示效果,通常这会浮现许多问题,尤其浏览器版本就可能让显示成效完全不同,也只好尽力维持让每一种设备都能正常浏览网页.修改到完全没有问题必须投入 ...
- css的img移上去边框效果及CSS透明度
css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...
- IE10 CSS hack,IE兼容问题
IE10 CSS hack,IE兼容问题 作者: 雪影 发表于2013 年 4 月 25 日 分类:技术分享 | 暂无评论 | 人气: 376 度 首先,ie10不支持条件注释了. 方法一:特性检测: ...
- 提升iOS审核通过率之“IPv6兼容测试”
作者:jingle 腾讯系统测试工程师 商业转载请联系腾讯WeTest授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/285.html 一.背景 在 ...
- ipa包兼容性大作战!WeTest iOS深度兼容测试全新升级
2018年,移动端适配话题热闹无比,有iOS新版本新机型发布,全面屏.异形屏.曲面屏争相斗艳,从而产生了各类特殊的屏幕分辨率设备. 正是因为这些特殊分辨率,导致2018年手机设备频繁出现适配问题,如屏 ...
- WEB测试—兼容测试
现在的操作系统,浏览器越来越多样性,导致软件兼容性测试在目前软件测试领域占有很重要的地位,我在测试项目经历中,以浏览器的兼容测试为主,平台.分辨率为辅. (我的经验前提:我测试过3类的不同行业的web ...
随机推荐
- Core Data-备用
Core Data是一个功能强大的层,位于SQLite数据库之上,它避免了SQL的复杂性,能让我们以更自然的方式与数据库进行交互.Core Data将数据库行转换为OC对象(托管对象)来实现,这样无需 ...
- hibernate 映射<五>多对多双向映射
多对多映射,可以分单向映射和双向映射.无论是单向还是多向那一方维护,还是双方维护,生成的表结构是一样的. 订单order和产品product是对多对的关系,就是多个订单可以对应多个产品,多个产品也可以 ...
- 网络编程中几个地址结构与转换(in_addr,sockaddr,sockaddr_in,pcap_addr)
man socket可以查看相关信息. socket头文件: #include <sys/types.h> /* See NOTES */ #include <sys/socket. ...
- cf500C New Year Book Reading
C. New Year Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- js原型继承深入
js采用原型继承来实现类的派生,但是原型链再深入点,我们又知道多少呢,现在不妨往下看: 先来一个原型继承: var M1 = function() { this.param = "m1's ...
- C++中的基类和派生类
转载自:http://www.cnblogs.com/sujz/archive/2011/05/12/2044365.html 派生类的继承方式总结: 继承方式 说明 public 基类的public ...
- MySQL查看数据库、表的占用空间大小
SELECT TABLE_NAME,DATA_LENGTH+INDEX_LENGTH,TABLE_ROWS FROM information_schema.tables WHERE TABLE_SCH ...
- C - Critical Links - uva 796(求桥)
题意:有一些网络通过一些线路连接,求关键的连接,也就是桥,如果删除这个链接那么会产生两个子树 分析:注意一下图不是连通图即可 ************************************* ...
- 小结OC中Retain cycle(循环引用)
retain cycle 的产生 说到retain cycle,首先要提一下Objective-C的内存管理机制. 作为C语言的超集,Objective-C延续了C语言中手动管理内存的方式,但是区别于 ...
- 百度全站变https
今天打开百度首页,突然发现,百度的网址变为 https://www.baidu.com/,如下图: 好嘛,以后再也不怕别人使用抓包工具查看我在百度的搜索数据了.当年的Duck Duck Go就是因为是 ...