Question

将以下代码插入桌面上的基本test.html文件中。使用谷歌浏览器，Firefox和Internet Explorer运行。

它无法在IE中运行！

我认为没有理由为什么这个代码会出现故障。如果你知道为什么请尝试解决这个问题。是否有一些css命令与ie不兼容或者我是否需要使用特定的代码来定位特定的浏览器...（我不喜欢这样做）。

<html>
<head>

<style>

html, body {
  height: 100%;
  margin: 0;
  background: #A3A3A3;
  background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 80px, transparent 87px,   transparent 140%);
  background-repeat: no-repeat;
}
#maincontainer {
  min-height: 100%;
  width: 942px;
  min-width: 600px;
  margin: auto;
  border: ridge;
  border-color: #919191;
  border-top: 0;
  border-bottom: 0;
  background: rgba(255,255,255,0.35);
  padding-left: 16px;
  padding-right: 16px;
}

</style>

</head>

<body>

<div id="maincontainer">


</div>

</body>
</html>

Answer 1

要回答部分问题，IE8及更早版本不支持RGBA作为背景色。我不久前遇到了这个问题，并将其与背景色RGBA一起用于IE支持：

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FFFFFFF', EndColorStr='#7FFFFFFF');

“7FFFFFFF” - 前两个字符是透明度，最后6个是颜色。全部以十六进制

有关IE渐变的更多信息，请访问：http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

希望这有帮助

Answer 2

似乎许多人正在远离CSS并且正在转向SVG进行渐变。

如果您将此代码粘贴到记事本中并将其命名为：bkg.svg

<?xml version="1.0" ?>
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#7D7D7D" stop-opacity="1"/>
      <stop offset=".92" stop-color="#7D7D7D" stop-opacity="1"/>
      <stop offset="100%" stop-color="#0D0D0D" stop-opacity=".0"/>
    </linearGradient>
  </defs>

  <rect width="100%" height="87px"
     style="fill:url(#myLinearGradient1);" />
</svg>

你的HTML应该是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
   <style type="text/css">

   html, body {
      height: 100%;
      margin: 0;
      background: #A3A3A3;
      background-image: url("svg-gradient.svg");
      background-repeat: no-repeat;
   }

   #maincontainer {
      min-height: 100%;
      width: 942px;
      min-width: 600px;
      margin: auto;
      border: ridge;
      border-color: #919191;
      border-top: 0;
      border-bottom: 0;
      background: rgba(255,255,255,0.35);
      padding-left: 16px;
      padding-right: 16px;
   }

   </style>
   <title></title>
</head>
<body>
   <div id="maincontainer"></div>
</body>
</html>

这给了我在chrome，firefox和IE9中寻找的结果。

参考： css-gradients-for-ie9

Answer 3

在文档顶部添加<!doctype html>，将其标识为标准模式文档。使用F12开发人员工具确保您的页面未在兼容模式下运行。

Internet Explorer浏览器正在处理我的代码非常奇怪

3 个答案: