html - Css Paper 效果在 FireFox 中不起作用

Question

我创建了一个动态填充 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 兼容性的好处

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