用css对齐形状：之前，：之后

我正在尝试在：之前/之后制作形状：之后。这在Chrome中运行正常，但在Firefox中。有一个小的错位。并在打印时在元素和after选择器之间产生一个小的空白区域。用css对齐形状：之前，：之后

这是它的外观在打印预览与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一个普拉克。

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

来源

2017-08-06 Sibi Raj

尝试使用一个CSS复位--- https://necolas.github.io/normalize.css/ –

会尝试，... –

使用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>

来源

2017-08-06 07:14:35 aje

谢谢。但使用Firefox打印时总会有一个空白区域。可以是一个浏览器错误仪式。 –

@SibiRaj你可以尝试用'.text {box-shadow :: -2px 0 1px -1px＃91C34F'上的阴影来修补它，或者尝试另一种方法：https：//codepen.io/gc-nomade/pen/ LjriC（伪装在顶部，并隐藏容器的一部分，而不是看起来更大） –

也会尝试... –

以http://dowebsitesneedtolookexactlythesameineverybrowser.com/为中心。看起来不错是一个明智的目标，看起来不一样。
了解标准（我们从不知道是因为错误还是因为您提供的指令只对特定窗口大小有意义）
使用它们（不要忘记验证HTML和CSS和皮棉JS）
确保你搞标准模式
了解错误在浏览器中

虽然你的代码是正确的，它完美对铬。做检查在这里，

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

希望它帮助。

来源

2017-08-06 05:54:14 djmayank

用css对齐形状：之前，：之后

回答

相关问题