关于IE6、IE7、IE8实现盒子阴影shadow的几个注意点

通常,我们实现盒阴影都是通过这段代码来实现的

-moz-box-shadow: 3px 3px 4px #000;

-webkit-box-shadow: 3px 3px 4px #000;

box-shadow: 3px 3px 4px #000;

  但是,IE6、7、8不认识这段样式,所以我们会考虑用滤镜来实现这功能

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘)";

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘);

  其实如果要求不是那么苛刻的话,IE下用滤镜已经能达到我们要的效果了。当然,如果你觉得滤镜不那么完美,非要用图片去实现,那也可以,就不用继续往下读我要说明的几个注意点了。

  首先,滤镜里的颜色属性必须写完整,不能用缩写。比如#000000不能写成#000,不然就会出现这样的效果

  而且,不管你用什么颜色的缩写,都会变成这样,哪怕你写成#fff,最终效果也会是这样。

  第二,滤镜的阴影是计算在宽高内的。比如我的盒子宽高都是100px,当我设置阴影的宽度为4px的时候,实际我盒子的宽度和高度就都变成了104px

  第三,在盒阴影下,box会自动加上overflow:hidden。

时间: 2024-10-12 19:26:55

关于IE6、IE7、IE8实现盒子阴影shadow的几个注意点的相关文章

让IE6/IE7/IE8支持CSS3属性的8种方法介绍

我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的.到目前为止,有不少可以让IE支持部分CSS3属性的工具.例如: 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的元素以及ClassName

[转]CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法

CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法 2013-12-12  By 奥夫 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对… 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !impo

DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-compatible" content="ie=7" /> 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如 margin-left:10px !important;; margin-left:5px; +height:120px

IE6/IE7/IE8/FF兼容问题汇总,以及解决方案

1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了<meta http-equiv="x-ua-compatible" content="ie=7" />2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px !important;;margin-left:5px;+height:120px;5.有时

meta 标签代码解决IE兼容问题,IE6,IE7,IE8,IE9,IE10(包括360的兼容模式)

最近做了一个项目,客户反映,在360下布局错位,远程调试了一下,发现客户使用的是360的兼容模式,然而我在自己的电脑上测试的时候是正常的(兼容模式也正常):简单研究了一下360的兼容模式,在360的兼容模式下按F12得到下图的调试信息: 经过测试,发现是红框处的设置的ie版本太低导致的,主要是文档模式更改文档模式为相对较高的版本即可解决, 这里,我添加了如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge,ch

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 http://www.jb51.net/css/383986.html

在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 复制代码 代码如下: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>; <head> <meta http-equiv=Content-Type conten

IE6,IE7,IE8下报JS错误:expected identifier, string or number的原因及解决的方法

今天在调试一个页面的时候遇到一个问题,在IE9下执行得非常好的脚本,在IE8里打开的时候弹出错误:expected identifier, string or number,依照经验,应该是定义对象的时候最后一个属性末尾跟了逗号,但检查一遍后没发现有这样的情况,后来细致看了一下报错的位置,发现有定义json对象属性时,属性名没实用引號括起来,于是加了上去再试,问题攻克了. 综上所述,当出现expected identifier, string or number的错误时,你首先应该检查在使用对象

[转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性中使用了显示完整标题,也不如完整的标题文字连接.这个方法使得两者兼得,既能显示完整标题又对搜索引擎友好. 如果不想显示省略号,那么把text-overflow属性值改成 clip 就行了,显示的还是完整的标题文字连接. 下面是html文件完整代码,已经测试过了,大家复制使用即可. 效果预览: <!D

HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理,让其进行兼容 方法一:javascript code <!--[if lt IE9]> <script> (function() { if (!/*@[email protected]*/0) return; var e = "abbr, article, aside, a