Question

我正在尝试在：之前/之后制作形状。这适用于Chrome但在Firefox中。有一个小的错位。并且在打印时会导致元素和：选择器之后出现小的空白区域。

这就是它在使用Firefox打印预览时的样子

HTML

<div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
 </div>

我的CSS

/* Styles go here */

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 8px 80px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: -0.5px;
  left: -37px;
  border-right: 38px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

这是上面代码https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview的插件。

如何在所有浏览器中正确对齐？

Answer 1

对left，border-right和border-bottom使用相等的值，也没有像.5px那样的值。使用line-height使文字垂直对齐。

updated plunk

＆＃13;

/* Styles go here */

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 0px 80px;
  height:34px;
  line-height:28px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: -34px;
  border-right: 34px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

牢记http://dowebsitesneedtolookexactlythesameineverybrowser.com/。看起来很好是一个明智的目标，看起来不一样。
了解标准（我们永远不知道差异是因为某个错误，还是因为您提供了仅对特定窗口大小有意义的说明）
使用它们（不要忘记验证HTML和CSS以及lint JS）
确保您参与标准模式
了解浏览器中的错误

虽然您的代码是正确的，但它在chrome上完美运行。请点击此处，

https://jsfiddle.net/djmayank/q20e6u9m/

HTML：

<div class="container">
    <div class="topbar">
      <div class="text">Text</div>
    </div>
 </div>

CSS：

.container .topbar {
  height: 15px;
  background-color: #91C34F !important;
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.container .topbar .text {
  position: relative;
  color: #fff !important;
  float: right;
  top: 3px;
  background-color: #91C34F !important;
  font-size: 16px;
  padding: 8px 80px;
}

.container .topbar .text:after {
  height: 0;
  content: "";
  display: block;
  position: absolute;
  top: -0.5px;
  left: -37px;
  border-right: 38px solid #91C34F !important;
  border-bottom: 34px solid transparent;
}

希望它有所帮助。

使用css对齐形状：before，：after

2 个答案: