Question

我将page.css（下面的内容）和.gif文件附加到我的帮助项目的[Files]部分，并将此行添加到一些html文件中：

<body class="grade">
<link rel="stylesheet" href="page.css" type="text/css" />

一切正常，chm文件显示一个很好的渐变。

当我切换到帮助中的非渐变页面然后切换回渐变网站时会发生一件奇怪的事情：渐变消失但其他css属性仍然存在。

有人有想法吗？

这是我的page.css：

body{font-family:Arial, sans-serif;}

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

a {text-decoration:none; border:none; outline:none;}
a:hover{color:#FF3F00; text-decoration:none; border:none; outline:none;}
a:visited {text-decoration:none; border:none; color:#FF3F00; outline:none;}
a:visited:hover{color:#0000FF; text-decoration:none; border:none; outline:none;}

h1{font-size:15pt; margin-top:20px;}

h2{font-size:13pt;margin-left:20px; margin-bottom:0px; padding:0px;}

h3{font-size:11pt; margin-left:40px; margin-bottom:0px; margin-top:0px; padding:0px;}


p.text{font-size:11pt; color:#000; margin-left:40px; margin-bottom:0px; margin-top:0px; padding:0px;}
/*p.textimg{font-size:10pt; color:#000; margin-left:100px; margin-top:0px;}*/

div#page{width:95%; margin:auto;}

.grade {background-image:url(images/blue3.gif); background-repeat: repeat-y;}

ul {list-style:disc;}
li {font-size:11pt;}
br {clear:left}

Answer 1

将以下语句添加到所有HTML文件的部分。如果HTML主题文件封装在.chm帮助文件中，则此方法有效。

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

e.g：

<!DOCTYPE html>

<html>
<head>
  <title>Gradient used</title>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
  <link rel="stylesheet" href="page.css" type="text/css">
</head>

<body id="grad">

  <p>This is a test.</p>

  <p>And a second line.</p>

</body>
</html>

HTML Help Workshop：css渐变消失

1 个答案: