Question

我经常注意到这一点，我编写的代码在CodePen等网站上运行良好，当我将它复制到我自己的网站时，CSS会搞砸。这是一个例子

https://codepen.io/anon/pen/xzONJd（这不是我的）。

＆＃13;

html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ddf0fc;
  box-sizing: border-box;
}

#btns * {
  transition: all 0.3s ease-in-out;
}

#btns {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-flow: row wrap;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.btn {
  position: relative;
  padding: 10px 20px 25px;
  width: 25%;
  background: #111;
  font-family: lato;
  cursor: pointer;
  box-sizing: border-box;
}


/* Button Backgrounds */

.btn:nth-child(1) {
  background: #117ec3;
}

.btn:nth-child(2) {
  background: #1491e1;
}

.btn:nth-child(3) {
  background: #2ba1eb;
}

.btn:nth-child(4) {
  background: #49afef;
}


/* Arrows */

.btn:nth-child(1):after,
.btn:nth-child(2):after,
.btn:nth-child(3):after {
  position: absolute;
  top: 45%;
  right: -18px;
  z-index: 1;
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #117ec3;
  transition: all 0.3s ease-in-out;
}

.btn:nth-child(2):after {
  border-left: 20px solid #1491e1;
}

.btn:nth-child(3):after {
  border-left: 20px solid #2ba1eb;
}


/* Icon */

.btn .icon {
  display: block;
  margin: 10px auto;
  width: 80px;
  height: 80px;
  transform-origin: center;
  transform: scale(0.9);
  color: #fff;
}

.btn .icon svg {
  fill: currentColor;
}

.btn .icon path {
  fill: currentColor;
}

.btn .icon {
  fill: currentColor;
}


/* Text Styles */

.btn h2 {
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-family: raleway;
  font-size: 1.4em;
  line-height: 1em;
  font-weight: 400;
}

.btn p {
  color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 300;
}


/* Hover Effects */

.btn:hover {
  background: #0b6ca9;
}

.btn:hover:after {
  border-left: 20px solid #0b6ca9;
}

.btn:hover .icon {
  transform-origin: center;
  transform: scale(1);
  color: #fff;
}

.btn:hover h2 {
  color: #fff;
}


/* Media Queries */

@media all and (max-width: 950px) and (min-width: 701px) {
  .btn {
    width: 50%;
  }
  .btn:nth-child(2):after {
    border-left: 0px;
  }
}

@media all and (max-width: 700px) and (min-width: 0px) {
  .btn {
    display: block;
    width: 100%;
  }
  .btn:nth-child(1):after,
  .btn:nth-child(2):after,
  .btn:nth-child(3):after {
    border-left: 0px;
  }
}

＆＃13;

<div class="btn" onclick="window.location='#'">
  <svg class="icon">
        <use xlink:href="#helmet"></use>&nbsp;</svg>
  <h2>Heading</h2>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="btn" onclick="window.location='#'">
  <svg class="icon">
        <use xlink:href="#cutters"></use>&nbsp;</svg>
  <h2>Heading</h2>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="btn" onclick="window.location='#'">
  <svg class="icon">
        <use xlink:href="#heart"></use>&nbsp;</svg>
  <h2>Heading</h2>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="btn" onclick="window.location='#'">
  <svg class="icon">
        <use xlink:href="#caution"></use>&nbsp;</svg>
  <h2>Heading</h2>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

＆＃13;

我将SCSS翻译成CSS并将其复制到我自己的网站，现在看起来像：https://imgur.com/a/RvA14zL

字体差异很好（我改变了图标bc它没有出现，但我现在使用的任何图标看起来都很小），但是图标大小/位置，文本换行等内容不再有效。是否有一个原因？我把图标做得更大了，但是即使在我将padding设置为0之后，它周围仍然有大的填充。

Answer 1

我假设下面是您的代码的完整示例。我添加了btns div和一个html标签。

由于这是在这里工作，也是在谷歌Chrome上本地工作，我建议以下两件事：

尝试使用其他浏览器。如果可行，请搜索CSS浏览器差异。
如果不是这样的话，必须要覆盖你的CSS。检查一些元素并检查是否在这些样式上应用了其他任何内容。

对于缺少的字体和图标，您可以单击Codepen中HTML左侧的齿轮图标。它显示了一些插入0部分的代码。

＆＃13;

<head>

＆＃13;

html {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ddf0fc;
  box-sizing: border-box;
}

#btns * {
  transition: all 0.3s ease-in-out;
}

#btns {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-flow: row wrap;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.btn {
  position: relative;
  padding: 10px 20px 25px;
  width: 25%;
  background: #111;
  font-family: lato;
  cursor: pointer;
  box-sizing: border-box;
}


/* Button Backgrounds */

.btn:nth-child(1) {
  background: #117ec3;
}

.btn:nth-child(2) {
  background: #1491e1;
}

.btn:nth-child(3) {
  background: #2ba1eb;
}

.btn:nth-child(4) {
  background: #49afef;
}


/* Arrows */

.btn:nth-child(1):after,
.btn:nth-child(2):after,
.btn:nth-child(3):after {
  position: absolute;
  top: 45%;
  right: -18px;
  z-index: 1;
  content: "";
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #117ec3;
  transition: all 0.3s ease-in-out;
}

.btn:nth-child(2):after {
  border-left: 20px solid #1491e1;
}

.btn:nth-child(3):after {
  border-left: 20px solid #2ba1eb;
}


/* Icon */

.btn .icon {
  display: block;
  margin: 10px auto;
  width: 80px;
  height: 80px;
  transform-origin: center;
  transform: scale(0.9);
  color: #fff;
}

.btn .icon svg {
  fill: currentColor;
}

.btn .icon path {
  fill: currentColor;
}

.btn .icon {
  fill: currentColor;
}


/* Text Styles */

.btn h2 {
  margin-bottom: 15px;
  text-align: center;
  color: #fff;
  font-family: raleway;
  font-size: 1.4em;
  line-height: 1em;
  font-weight: 400;
}

.btn p {
  color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 300;
}


/* Hover Effects */

.btn:hover {
  background: #0b6ca9;
}

.btn:hover:after {
  border-left: 20px solid #0b6ca9;
}

.btn:hover .icon {
  transform-origin: center;
  transform: scale(1);
  color: #fff;
}

.btn:hover h2 {
  color: #fff;
}


/* Media Queries */

@media all and (max-width: 950px) and (min-width: 701px) {
  .btn {
    width: 50%;
  }
  .btn:nth-child(2):after {
    border-left: 0px;
  }
}

@media all and (max-width: 700px) and (min-width: 0px) {
  .btn {
    display: block;
    width: 100%;
  }
  .btn:nth-child(1):after,
  .btn:nth-child(2):after,
  .btn:nth-child(3):after {
    border-left: 0px;
  }
}

＆＃13;

CodePen示例搞砸了我自己的文件 - 为什么？

1 个答案: