我的html css在Codepen中运行良好，但是当我在Chrome环境中打开时，它看起来不对

Question

我的codepen看起来我希望我的视图看起来像，但是当我在我的环境中运行代码时，它看起来并不合适。因为我复制并粘贴了相同的代码，所以我无法弄清楚有什么不同。我在Chrome上运行它，并使用chrome中的codepen。这可能是某种浏览器兼容性问题，但是如果codepen正在使用其他浏览器引擎来呈现视图。我将视图放在Angular模板中，用于使用指令。我使用Grunt编译我的网站。

我的环境

Codepen

HTML

<section id="ribbon">
  <ul class="tabs">
    <li class="v-zigzag active">Mode 1</li>
    <li class="v-zigzag">Mode 2</li>
    <li class="v-zigzag">Mode 3</li>
    <li>Mode 4</li>
  </ul>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  margin: 0;
  padding: 0;
}

#ribbon {
  background: whitesmoke;
}
#ribbon ul {
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
  list-style-type: none;
}
#ribbon ul li {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #757575;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}
#ribbon .v-zigzag {
  position: relative;
  background: linear-gradient(45deg, #757575 5px, transparent 0) 0 5px, linear-gradient(135deg, #757575 5px, whitesmoke 0) 0 5px;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
}
#ribbon .v-zigzag:before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, whitesmoke 5px, transparent 0) 0 5px, linear-gradient(135deg, whitesmoke 5px, transparent 0) 0 5px;
  background-color: transparent;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  right: 3px;
  top: 0;
  bottom: 0;
}
#ribbon .v-zigzag.active:before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #03A9F4 5px, transparent 0) 0 5px, linear-gradient(135deg, #03A9F4 5px, transparent 0) 0 5px;
  background-color: transparent;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  right: 3px;
  top: 0;
  bottom: 0;
}
#ribbon .tabs .active {
  background-color: #03A9F4;
  color: white;
}

Answer 1

您应该将编译后的输出与codepen.io上的编译输出进行比较。我怀疑你可能不会使用相同的CSS预处理器（SCSS）作为codepen或其他版本。

我在本地运行了编译后的css和html，一切正常。

Answer 2

通过删除section标记来解决，该标记正在应用由我的环境angular-fullstack-generator创建的一些其他样式。