为什么这个CSS代码无法正常使用Chrome，但适用于Mozilla？

Question

此代码与Mozilla完美配合，但Chrome中存在一个小问题。

Chrome结果：

Mozilla结果：

代码：

＆＃13;

＆＃13;

h3.title-text {
  background: #fafafa none repeat scroll 0 0;
  border-bottom: 1px solid #efefef;
  font-family: sans-serif;
  font-size: 23px;
  font-weight: 500;
  margin: -15px 0 15px -30px;
  padding: 3px 50px 15px 10px;
  text-transform: capitalize;
  width: 100%;
}
h3.title-text edger::before {
  border-bottom: 36px solid transparent;
  border-right: 20px solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 7px;
}
h3.title-text edger::after {
  border-bottom: 41px solid #000;
  border-right: 27px solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 0;
}
h3.title-text edger {
  background: #000 none repeat scroll 0 0;
  color: #fff;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 0 -10px;
  outline: 0 none;
  padding: 10px 19px 10px 32px;
  position: relative;
  text-transform: capitalize;
  top: 4px;
  vertical-align: baseline;
}

＆＃13;

<h3 class="title-text"><edger>
<i class="fa fa-apple"></i>
      Latest Softwares</edger></h3>

＆＃13;

＆＃13;

＆＃13;

那么为什么边缘在Chrome浏览器中显得更大？虽然在mozilla中似乎没问题。请查看代码中哪些属性使用错误或不支持chrome。感谢。

Answer 1

我知道这种事情是多么令人沮丧。跨浏览器不兼容是一个真正的痛苦！

我会推荐的，以及我最近一直在做的，是在我的CSS样式表的开头包含代码，它将重置我的网站正在查看的任何浏览器，所以我可以从“级别”的角度编写代码比赛场地。我发现它真的有助于消除你所拥有的问题。这是我喜欢使用的代码...

/* ========== Browser Reset ========== */

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

给它一个旋转，看看它是否有帮助。

Answer 2

根据@pkExec评论，这里有更新的代码段：

h3.title-text {
  background: #fafafa none repeat scroll 0 0;
  border-bottom: 1px solid #efefef;
  font-family: sans-serif;
  font-size: 23px;
  font-weight: 500;
  margin: -15px 0 15px -30px;
  padding: 3px 50px 15px 10px;
  text-transform: capitalize;
  width: 100%;
}
h3.title-text edger::before {
  border-bottom: 36px solid transparent;
  border-right: 20px solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 7px;
}
h3.title-text edger::after {
  border-bottom: 41px solid #000;
  border-right: 27px solid transparent;
  content: " ";
  height: 0;
  left: 100%;
  margin-left: 0;
  margin-top: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 0;
}
h3.title-text edger {
  background: #000 none repeat scroll 0 0;
  color: #fff;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 0 -10px;
  outline: 0 none;
  padding: 10px 19px 10px 32px;
  position: relative;
  text-transform: capitalize;
  top: 4px;
  vertical-align: baseline;
  display: inline-block;
  height: 21px;
}

<h3 class="title-text"><edger>
<i class="fa fa-apple"></i>
      Latest Softwares</edger></h3>

或者在修边规则上你可以省略'height：21px;'并将填充更改为：12px 19px 11px 32px;