加载中…
正文 字体大小:

firefox中显卡升级后css小三角显示bug

(2013-12-26 15:15:23)
标签:

firefox

显卡驱动

图形媒体加速器

important

三角形

分类: 浏览器兼容性
firefox中显卡升级后css小三角显示bug
如上图所示小三角的效果,我习惯用css实现。html代码如下:
firefox中显卡升级后css小三角显示bug
css大体代码如下:
.triangle-all{ border-width:6px; height:0px; width:0px; position:absolute; overflow:hidden; }
.tri-top-style{ border-style:solid!important;border-style:dashed dashed solid dashed;}
.tri-topGray-pos{border-color:transparent transparent #999 transparent; left:45%; top:-12px;}
.tri-topWhite-pos{border-color:transparent transparent #fff transparent; left:45%; top:-11px;}
这种写法各种浏览器都兼容。但是直到前两天电脑一阵一阵的黑屏,提示显卡驱动异常,于是用驱动精灵更新了显卡驱动,目前是安装了如下图所示程序:
firefox中显卡升级后css小三角显示bug
安装完以后发现除了firefox外,其余浏览器小三角都是正常的,只有firefox显示异常,如下图
firefox中显卡升级后css小三角显示bug
不知道是firefox和此显卡驱动有兼容性问题,还是存在别的原因。
于是改动代码看看,发现只要将.tri-top-style里面的样式border-style:solid这样写firefox就显示正常了,但是ie6却不正常了。因为ie6不支持transparent透明色,所示将边框设为实线ie6中就会出现黑色背景。如下图
firefox中显卡升级后css小三角显示bug
所以,还是想从firefox中显示异常入手,想加入ff的hack,刚开始先加了-moz-,但是不起作用,后来实在没办法,加了!important,这样所有的浏览器就都显示正常了。只是委屈了ie7等高版本的浏览器(!important能被ff和ie7等高版本浏览器识别)。
最终代码:
.tri-top-style{ border-style:solid!important;border-style:dashed dashed solid dashed;}

0

阅读 评论 收藏 禁止转载 喜欢 打印举报
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有