文章/答案/技术大牛

发布

社区首页 >问答首页 >盒影与IE9兼容

问盒影与IE9兼容
EN

Stack Overflow用户

提问于 2014-05-26 12:52:48

回答 3查看 244关注 0票数 0

我尝试在css3中使用框影，但是它不适用于IE，在chrome和firefox上工作得很好。

我知道，在IE9上，我必须使用没有moz或webkit前缀的框影。
我使用iFrame在我的WebPage中进行登录(为ERP登录)，并且这个WebPage有一个已知的错误，当您使用html5时，您可以在登录后重定向，这就是为什么我必须使用<html>标记而不是<!DOCTYPE html> (我已经打开了修复此bug的票据)。
如果我使用<!DOCTYPE html>我的盒影工作，但我的iframe冻结。
如果我使用<html>，我的iFrame可以正常工作，但是我的盒影不会被忽略。所以，实际上我必须在设计和功能之间做出选择，但是我非常肯定stackoveflow知道这方面的一个问题。

如果你知道一个解决方案或一个黑客，它可以是很酷的。

在这里，我的代码：(使用<!DOCTYPE hml>，但希望在<html>中获得相同的效果)

    #header-container{
    -webkit-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
       -moz-box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);
            box-shadow:0 5px 8px rgba(0, 0, 0, 0.15);

}

internet-explorer-9

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-05-26 13:11:50

CSS3 box-shadow是一个候选人推荐。

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

IE9在对表单元格中的方框进行阴影时显示box-shadow 没有问题(如果表的CSS属性设置为collapse，则不应用box-shadow。这在将来的版本中是固定的)。

如前所述，IE6-8需要视觉过滤器来模拟CSS3框-阴影而没有 JavaScript。为了说明这一点，我将在下面展示几种不同类型的框影，并展示CSS3语法和等效的Visual CSS配方。这些菜谱中有些产生了几乎相同的结果，而另一些则是粗略的等价物。

请注意，所有这些示例都使用了Paul爱尔兰的条件CSS模式的一个变体，以创建IE专用规则。这涉及到用以下<body>替换文档的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]-->

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

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

(注:Paul爱尔兰语的技巧在html标签周围有条件注释，而不是body标记。您可以使用这两种技术来工作。我只是更喜欢使用后者。)

所有这些视觉过滤器食谱取决于框“有布局”。如果您对视觉过滤器激活有任何困难，请在IE6-8特定的CSS中设置zoom: 1或static宽度，以强制该块进行布局。

类型#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);
}

这个解决方案有两个例外--。第一个处理块具有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中添加一个背景颜色，并使用Chroma过滤器将其删除。

注意:所有其他类型的框影食谱，以下也应该使用这种色度过滤方法，当它是希望有一个透明的背景在盒子本身。

类型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);
}

关于视觉过滤规则的两个重要注意事项：

如前所述，IE6-8的CSS使用较浅的颜色作为阴影。这是由于阴影过滤器的行为方式:它需要一个较轻的阴影来模拟同样的效果。另外，与CSS3示例相比，视觉过滤器示例被向下推到右边。这是出于与类型1b相同的原因，开发人员必须再次使用边距或定位才能将盒子放在与IE6-8完全相同的位置。

票数 0

Stack Overflow用户

发布于 2014-05-26 12:56:30

可以通过添加以下内容来“欺骗”：

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

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

然而，这充其量不过是一次黑客攻击，可能帮不上什么忙。您确实应该专注于修复阻止您正确声明<!DOCTYPE>的bug。

票数 0

Stack Overflow用户

发布于 2014-05-26 13:05:26

doctype标记不是html标记的替代品，两者都应该有。

如果只有doctype标记而没有html标记，则标记无效。浏览器将尝试充分利用已损坏的代码，但是有许多方法可以对其余代码的部分进行错误解释。

如果您只有html标记而没有doctype标记，浏览器将以古怪模式解析页面，这基本上是使用最古老的标准。这将禁用一些新标准的特性，如CSS3。

如果不能使用HTML5文档类型，则应该将其用于较早的标准，例如HTML4.01：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23870639

复制

相似问题

问盒影与IE9兼容
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问盒影与IE9兼容EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问盒影与IE9兼容
EN