-1

将以下代码插入到桌面上的基本 test.html 文件中。使用 google chrome、firefox 和 Internet Explorer 运行。

它无法在 IE 中运行！

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

<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>
4

3 回答 3

2

要回答您的部分问题，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

希望这可以帮助

于 2013-07-08T05:08:20.930 回答
0

似乎很多人正在远离 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

于 2013-07-08T05:43:54.417 回答
0

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

于 2013-07-08T17:25:14.320 回答