Html 盒影与IE9兼容性_Html_Css_Internet Explorer 9

Html 盒影与IE9兼容性

html css

Html 盒影与IE9兼容性,html,css,internet-explorer-9,Html,Css,Internet Explorer 9,我尝试将box shadow与css3一起使用，但它在IE上不起作用，在chrome和firefox上运行良好我知道，在IE9上，我必须使用不带moz或webkit前缀的box shadow 我在我的网页中使用了一个iFrame进行登录（为ERP登录而设计），这个iFrame有一个已知的bug，当你使用html5时，你可以在登录后重定向，这就是为什么我必须使用标记，而不是（我已经为修复这个bug开了罚单）如果我使用我的长方体阴影工作，但我的iframe冻结如果我使用我的iFrame可以很

我尝试将box shadow与css3一起使用，但它在IE上不起作用，在chrome和firefox上运行良好

我知道，在
```
IE9
```
上，我必须使用不带
```
moz
```
或
```
webkit
```
前缀的box shadow
我在我的网页中使用了一个iFrame进行登录（为ERP登录而设计），这个iFrame有一个已知的bug，当你使用
```
html5
```
时，你可以在登录后重定向，这就是为什么我必须使用
标记，而不是
（我已经为修复这个bug开了罚单）
如果我使用
我的长方体阴影工作，但我的iframe冻结
如果我使用
我的iFrame可以很好地工作，但是我的长方体阴影没有显示出来。所以，实际上我必须在设计和功能之间做出选择，但我很确定stackoveflow知道其中的一个问题

如果你知道一个解决方案或黑客，它可能很酷

这里是我的代码：（使用

但希望与

具有相同的效果）

您可以通过添加以下内容来“作弊”：

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

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

框阴影

然而，这充其量只是一种黑客行为，可能不会有多大帮助。您应该真正关注修复阻止您正确声明

的错误

doctype

标记不是

html

标记的替代品，您应该同时拥有这两个标记

如果只有

doctype

标记而没有

html

标记，则标记无效。浏览器将尽力充分利用已损坏的代码，但有许多方法可能会误解代码其余部分

如果您只有

html

标记，而没有

doctype

标记，浏览器将以怪癖模式解析页面，这基本上是使用最古老的标准。这将禁用较新标准中的某些功能，如CSS3

如果不能使用HTML5 doctype，则应将其用于较旧的标准，例如HTML4.01：

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

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

CSS3

框阴影是一个
它是一种向元素显示内部或外部阴影效果的方法，可以使用非标准的阴影
过滤器在较旧的IE版本中对其进行部分模拟。Safari、iOS Safari和Android浏览器中的部分支持指缺少inset
和模糊半径值支持
IE9
没有问题显示框阴影
，但在表格单元格内对框阴影时除外（如果表的CSS将其边框折叠
属性设置为折叠
，则不会应用框阴影
。这在以后的版本中已修复）
如前所述，IE6-8需要视觉过滤器来模拟CSS3
box shadows而不使用JavaScript。为了说明这一点，我将在下面展示几种不同类型的box shadows，并展示CSS3
语法和等效的视觉过滤器CSS配方这些配方产生几乎相同的结果，而其他配方则大致相同
请注意，所有这些示例都使用Paul Irish的条件CSS模式的变体来创建仅限IE的规则。这涉及到用以下HTML替换文档的
标记：
<!-- 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]-->

（注意：Paul Irish的技术正式使用了html标记周围的条件注释，而不是body标记。您可以使用这两种技术中的任何一种来工作。我只是更喜欢使用后者。）
所有这些视觉过滤器配方取决于“具有布局”框。如果激活视觉过滤器有任何困难，请在IE6-8特定CSS内设置缩放：1
或静态
宽度，以强制块具有布局
类型#1：简单、无模糊的阴影
为了在IE中模拟简单、不模糊的方框阴影，我们使用IE的DropShadow视觉过滤器：
#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);
}

此解决方案有两个例外。第一个例外处理块具有透明背景时的情况，另一个例外处理负的盒阴影

偏移
类型#1a：具有透明背景的块
假设您使用了上述CSS，但省略了background属性：

#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中的结果与普通页面一样可怕且不可读！为了解决旧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：发光盒阴影
我经常使用的第二个
框阴影是我称之为“发光框”的效果。当一个具有较大模糊半径的阴影直接放在一个框后面时会发生这种情况（即，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); } 有关可视筛选规则的两个重要注意事项：如前所述，IE6-8的CSS使用较浅的阴影颜色。这是由于阴影过滤器的行为方式：它 #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); } #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); }