Question

我尝试使用带有css3的box-shadow，但是它不适用于IE，在chrome和firefox上工作正常。

我知道，IE9我必须使用没有moz或webkit前缀的盒子阴影
我在我的网页中使用iFrame进行登录（Made for ERP登录），这个iframe有一个已知错误，当你使用html5时，你可以在登录后重定向，这就是为什么我必须使用{{1标签而不是<html>（我打开了修复此错误的票证）
如果我使用<!DOCTYPE html>我的盒子阴影效果，但我的iframe会冻结。
如果我使用<!DOCTYPE html>我的iFrame工作正常但我的盒子阴影没有显示。所以，实际上我必须在设计或功能之间做出选择，但我很确定stackoveflow知道这个问题。

如果你知道解决方案或黑客，那就很酷了

这里是我的代码:(使用<html>，但希望与<!DOCTYPE hml>具有相同的效果）

<html>

Answer 1

你或许能够欺骗＆＃34;添加：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

这将告诉IE使用最新标准进行渲染，其中包括box-shadow。

然而，这充其量只是一个黑客攻击，可能不会有多大帮助。您应该专注于修复阻止您正确声明<!DOCTYPE>的错误。

Answer 2

doctype代码不是html代码的替代品，您应该同时拥有这两个代码。

如果您只有doctype标记而不是html标记，则标记无效。浏览器将尝试充分利用损坏的代码，但有许多方法可能会误解其余部分代码。

如果您只有html标记而不是doctype标记，浏览器将以怪癖模式解析页面，这基本上是使用最旧的标准。这将禁用新标准中的某些功能，例如CSS3。

如果您无法使用HTML5 doctype，则应使用旧版标准，例如HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

W3C有一个Recommended Doctype Declarations列表，您可以在其中查看不同的版本和变体。

Answer 3

CSS3 box-shadow是 Candidate Recommendation 。

这是向元素显示内部或外部阴影效果的方法，在使用非标准shadow过滤器的旧版IE中，它可以部分模拟。 Safari，iOS Safari和Android Browser中的部分支持指的是缺少inset和模糊半径值支持。

IE9 没问题显示box-shadow 除了在阴影框表格单元格中时（）表的CSS将border-collapse属性设置为collapse，然后不应用box-shadow。这将在以后的版本中修复）。

如前所述，IE6-8要求可视过滤器模拟CSS3框阴影而不使用 JavaScript。为了说明这一点，我将在下面显示几种不同类型的框阴影，并显示CSS3语法和等效的 Visual Filter CSS配方。这些配方中的一些产生几乎相同的结果，而其他配方是粗略的等价物。

请注意，所有这些示例都使用Paul Irish的条件CSS模式的变体来创建仅限IE的规则。这涉及使用此HTML替换文档的<body>标记：

<!-- Extra white-space below is just to make it easier to read. :-) -->

   <!--[if lt IE 7 ]>   <body class="ie6">          <![endif]-->
   <!--[if IE 7 ]>      <body class="ie7">          <![endif]-->
   <!--[if IE 8 ]>      <body class="ie8">          <![endif]-->
   <!--[if IE 9 ]>      <body class="ie9">          <![endif]-->
   <!--[if (gt IE 9) ]> <body class="modern">       <![endif]-->
   <!--[!(IE)]><!-->    <body class="notIE modern"> <!--<![endif]-->

然后我们可以应用特定于IE版本的CSS。例如：

body.ie7 #box {
   /* insert IE7 specific CSS here */
}

（注意：Paul Irish的技术正式有关于html标签的条件评论，而不是正文标签。你可以使用这两种技术来工作。我只是喜欢使用后者。）

所有这些 Visual Filter 配方都依赖于“具有布局”框。如果您对 Visual Filters 激活有任何困难，请在IE6-8特定CSS中设置zoom: 1或static宽度以强制该块具有布局。

类型＃1：简单，不模糊的阴影

为了在IE中模拟简单，不模糊的盒子阴影，我们使用 IE的DropShadow Visual filter ：

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

此解决方案有两个例外。第一个处理块何时具有transparent背景，另一个处理负box-shadow偏移。

类型＃1a：具有透明背景的块

假设您使用上面的CSS，但省略了背景属性：

#box {
  /* CSS for all browsers.  Note there is no background-color, so box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: 5px 5px 0px #ff0000;
  -webkit-box-shadow: 5px 5px 0px #ff0000;
  -moz-box-shadow: 5px 5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

这样做会在IE6-8中产生一些意想不到的结果。 IE7中的结果与平均YTMND页面一样难以辨认！为了解决老年人IE中的这个问题，必须仅在IE6-8中添加背景颜色并使用色度过滤器将其删除。

注意：当需要在框中拥有透明背景时，后面的所有其他类型的盒子阴影配方也应使用此色度滤镜方法。

类型1b：负阴影偏移

如果存在负阴影偏移，您会看到被阴影框的位置有小差异：

#box {
  /* CSS for all browsers. */
  border: solid 1px #808080;
  background: #ffffcc;
  margin: 10px;
  padding: 10px;

  /* CSS3 Box-shadow code: */
  box-shadow: -10px -5px 0px #ff0000;
  -webkit-box-shadow: -10px -5px 0px #ff0000;
  -moz-box-shadow: -10px -5px 0px #ff0000;
}

/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}

类型＃2：发光框阴影

我使用的第二个box-shadow是我称之为“发光盒”的效果。当具有大模糊半径的阴影直接放在框后面时（即，x和y偏移设置为0，并且模糊半径为非零数），会发生这种情况。可以使用阴影过滤器在IE中模拟此效果。此滤镜必须应用四次（框的北，南，东和西）才能模拟CSS3效果。这是CSS食谱：

#box {
   box-shadow: 0 0 5px #666666;
   -webkit-box-shadow: 0 0 5px #666666;
   -moz-box-shadow: 0 0 5px #666666;
}   

body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}

关于Visual Filter规则的两个重要注意事项：

如前所述，IE6-8的CSS使用较浅的颜色作为阴影。这是由于阴影滤镜的行为方式：它需要较浅的阴影来模拟相同的效果。与CSS3示例相比，他还将Visual Filters示例向下推向右侧。这与类型1b 中所述的原因相同，并且开发人员将再次使用边距或定位来使框与IE6-8中的框完全相同。

box-shadow和IE9兼容性

3 个答案: