【问题标题】：My html css work fine in Codepen but doesn't look right when I open in my environment on Chrome我的 html css 在 Codepen 中可以正常工作，但是当我在 Chrome 上的环境中打开时看起来不正确
【发布时间】：2016-04-27 06:13:25
【问题描述】：

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

我的环境

代码笔

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;
}

【问题讨论】：

您是否尝试禁用扩展程序或在 InCognito 模式下运行？其他浏览器呢？
我刚刚尝试了 chrome incognito、safari 和 firefox，同样的问题。我有一种感觉，因为大多数样式都被正确应用，所以它可能是一种超越。我尝试将引导程序添加到我的代码笔中，但这并没有破坏任何东西。
可能重复：stackoverflow.com/q/26922098
我看到了这个，但我确定我使用的是 scss

标签： html css angularjs cross-browser

【解决方案1】：

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

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

【讨论】：

如何查看编译后的css？
你的代码还是在codepen上？在 codepen 上，您可以按“查看已编译”来查看它，您的代码将在浏览器控制台中显示编译（通常为 f12）
我没有来自环境的代码，我使用 grunt 编译

【解决方案2】：

通过删除 section 标签解决了这个问题，该标签应用了我的环境 angular-fullstack-generator 创建的一些额外样式。

【讨论】：