对齐形状 css :before, :after

Question

我正在尝试在 :before/ :after 中制作形状。这在 chrome 中工作正常，但在 Firefox 中。有一个小的错位。并在打印时导致元素和 :after 选择器之间出现一个小的白色 space。

这是它在 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

牢记http://dowebsitesneedtolookexactlythesameineverybrowser.com/。看起来不错是一个明智的目标，看起来一样不是。
了解标准（我们永远不知道差异是由于错误还是因为您提供的说明仅对特定 window 尺码有意义）
使用它们（不要忘记验证 HTML 和 CSS 并检查 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;
}

希望对您有所帮助。

Answer 2

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

updated plunk

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

<!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>

对齐形状 css :before, :after

Align shapes with css :before, :after

html

css

css-shapes