为什么这个 css 在 MVC 项目中不能按预期工作？答案

【问题标题】：Why won't this css work as expected in MVC project?为什么这个 css 在 MVC 项目中不能按预期工作？
【发布时间】：2016-09-14 06:27:50
【问题描述】：

我想在我的 MVC 项目中用 css 绘制一个阴阳符号。所以我找到了一些 css，它可以满足我的需求：

#yin-yang {
  width: 96px;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}
#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}
#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

&lt;div id="yin-yang"&gt;&lt;/div&gt;

我可以很容易地让它在JSFiddle 中工作：

但我一插入in my MVC project，就画错了

这可能是什么原因？

【问题讨论】：

您的页面上是否有其他 CSS 可能会覆盖您的样式？
删除 box-sizing 和 webkit-box-sizing 属性
注释掉使它在 dotnetfiddle 中也能工作，所以正如@StephenMuecke 建议的那样，里面一定有东西。
Stephen Muecke：您能更深入地描述一下如何做到这一点吗？
查看forked DotNetFiddle（只需将box-sizing: initial; 添加到每个样式中以覆盖引导程序默认值）

标签： html css .net asp.net-mvc asp.net-mvc-4

【解决方案1】：

您使用的引导 css 包括导致失真的 box-sizing: border-box;。您可以通过添加来覆盖它

box-sizing: initial;

到您的每个#yin-yang 样式（包括:before 和:after）

【讨论】：

【解决方案2】：

这是因为您在 MVC 或 DotnetFiddle 中使用 Bootstrap 框架，并且它具有一些 Reset CSS 以及一些基本属性，例如 box-sizing，这显然忽略了由于padding 和border 等而变化的任何元素的所有受影响的高度或宽度（在你的情况下是你的伪元素）。

使用这个 CSS 或者可以说改变你的 CSS 你也可以让它在你的环境中工作：

#yin-yang {
    width: 96px;
    height: 96px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 46px;
    height: 46px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    background: red;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 46px;
    height: 46px;
}

【讨论】：