Css Paper效果在FireFox中无效

Question

我创建了一个div，它使用javascript动态填充，其背景类似于一张笔记本纸。这适用于safari和chrome但由于某些原因在Firefox中无法正确呈现。谁能给我一些关于我造型错误的见解？

此图片是铬和野生动物园。

此图片来自Firefox。

这是我的html和css

<div id="paperBackground" class="col-sm-6 paper">
   <h3 style="text-decoration:underline;"><i>Shopping List<i></h3>
   <div class="multiOrderList">
     <p id="list"></p>
   </div>
   <div style="clear: both;"></div>
 </div>

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background: white;
  background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

+兼容性奖励

Answer 1

你缺少背景大小的无前缀版本：

-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;     // !!!

fiddle

并且为了奖励，添加了-ms-linear-gradient（并更改了未加前缀的数据）

background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -ms-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: linear-gradient(to top, #848EEC 0%, white 8%) 0 57px;

fiddle2

Answer 2

我花了无数个小时试图在各种浏览器中使用漂亮的CSS样式。有时最好的解决方案是最简单的解决方案。如果你只重复笔记本电脑线的一个薄图像（例如1px×10px），它将减少很多头痛并在所有浏览器中工作。

#paperBackground {
  background: url('images/notebook_lines.jpg') repeat;
}

Answer 3

此背景图案由Lea Verou制作，这可能是您正在寻找的（适用于所有最近的浏览器）：http://lea.verou.me/css3patterns/#lined-paper

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

Answer 4

CSS渐变的语法已经改变：渐变的方向现在必须指定为“to bottom”而不是“top”。此外，现在可能不需要-moz-前缀版本，因为自Firefox 16以来一直支持标准语法。