用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對齊形狀：之前，：之後

回答

相關問題