Html Css纸张效果在FireFox中不起作用

我创建了一个动态填充javascript的div，它的背景类似于一张笔记本纸。这适用于safari和chrome，但由于某些原因，在firefox中无法正确呈现。有人能告诉我我的造型有什么问题吗

这张图片是chrome和safari的

这张图片是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);
}

---

+ie兼容性奖励

此背景模式由Lea Verou制作，这可能是您在所有最新浏览器上寻找的作品：

---

我花了无数个小时试图在各种浏览器中使用漂亮的css样式。有时候，最好的解决方案是最简单的。例如，如果你只是重复一张1px×10px的笔记本行的薄图像，它将减少很多麻烦，并且在所有浏览器中都能工作

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

---

背景大小中缺少未固定的版本：

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

作为奖励，添加了-ms线性梯度和更改的不固定数据

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;

---

CSS渐变的语法已经改变：渐变的方向现在必须指定为“到底部”，而不仅仅是“顶部”。此外，现在可能不需要使用带前缀的in-moz版本，因为自Firefox 16以来就支持标准语法。

您是否考虑过制作一个小的精简图像并重复它？它将提供更多的兼容性。我正在考虑一片。这实际上是建立在twitter引导上的，专门用于移动设备。。我不知道这个片段是否会更好，或者仅仅是css在phoneshere的一个提琴上的性能可以帮助：@enguerranws你的提琴呈现的和firefox上我的图像显示的完全一样……这不是答案，只是一个评论，帮助其他用户通过一个实例了解你的问题。谢谢，这是相似的，但需要一些调整；我同意，如果可能的话，保持简单。这是一个即将部署的版本，它的兼容性稍差，但避免引用image:background image:urldata:image/png；base64，IVborw0KggoaaaAnsuhueugaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaDlxThaaaABMJLr0QA/wD/AP+GvaetaaaAAACXbiwxmaaastaaalWeampWyaaAB3RjTuuH3GMKEDC1FM+KlaaaAB1PVFH0Q29TBWwUdaaaaaaaaQjLyXRLzCzCB3AXROIEDv12+Z9F4Z9F4ZF4ZQLZ8ZXhaaABU5ERKJGG=；事实上，-ms前缀行不太需要。所有附带的IE10+版本都支持不固定的语法，而IE9根本不支持CSS渐变。只有IE10的早期Beta需要-ms-。@IlyaStreltsyn是的，我加入它主要是为了与-ms背景大小保持一致。修正了线性渐变中的语法错误，从上到上的更改足以使其作为报告工作，IE9+完全支持背景大小等，因此-ms前缀也可能是多余的

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;