带有angularjs的css中的奇怪梯度行为

Question

这是我正在使用的CSS

html .body-dark{
  background: #242A3F;
  background: -webkit-linear-gradient(left top, #242A3F, #333C55);
  background: -o-linear-gradient(bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
  background: linear-gradient(to bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(-90deg, red, yellow);
}

和玉相关

doctype
html.no-js
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    base(href='/')
    title Travel
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet',href='main.css',async)
  body.body-dark(ng-app='application')
    div(ng-view)
    <!-- build:js inline app.min.js -->
    script(src='app.min.js')
    <!-- /build -->
    script(src='//localhost:35729/livereload.js')

因此，您可以看到渐变类附加到正文，我假设应该只有一个渐变。但另一方面，这是我得到的输出

另一个重要信息可能是页面由两个组件组成，nav模板和form模板都使用ng-include调用。虽然我不确定是否有错误正因为如此。 此处还有来自浏览器的DOM副本

正如你所看到的那样，只有在表格结束之前，我才能将它扩展到整个页面。另外，为什么有两个梯度元素？

Answer 1

集

html, body, .body-dark{
  background: #242A3F;
  background: -webkit-linear-gradient(left top, #242A3F, #333C55);
  background: -o-linear-gradient(bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
  background: linear-gradient(to bottom right, #242A3F, #333C55);
  background: -moz-linear-gradient(-90deg, red, yellow);
  height: 100%;
}