Firefox包含< hr>高度的边框而铬不 [英] Firefox includes border in height of <hr> whilst chrome does not

问题描述

我尝试设计一个边框的样式，使其包含一个低于1px白线的

1px绿线

  hr {
 height：1px; 
 border：0; 
背景颜色：＃89a889; 
 border-bottom：1px solid #fafafa; 
} 
  

这个工作在webkit中，但firefox似乎包含在总高度的线。这使底部边框覆盖绿线。我可以这样做吗？

解决方案

hr {
height：0 ;
border：0;
border-top：1px solid＃89a889;
border-bottom：1px solid #fafafa;



$ b $ p
$ p使用两个边框。



演示



或者，如果您真的希望它能够使用背景色，使用 box-sizing：content-box 来让Firefox显示 hr 与普通的CSS框模型。





您可能需要包含其他供应商的前缀。 code> hr {
height：1px;
border：0;
background-color：red;
border-bottom：1px纯蓝色;
-moz-box-sizing：content-box;
}


演示

I'm trying to style a border so that it consist of a

1px green line below a 1px white line

hr{
    height: 1px;
    border: 0;
    background-color: #89a889;
    border-bottom: 1px solid #fafafa;
}

this works in webkit, but firefox seems to include the border in the total height of the line. This makes the bottom border cover the green line. Whan can I do about this?

解决方案

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #89a889;
    border-bottom: 1px solid #fafafa;
}

Use two borders.

Demo

Alternatively, if you really want it to work with a background color, use box-sizing: content-box to get Firefox to display an hr with the normal CSS box model.

You may want to include other vendor prefixes.

hr {
    height: 1px;
    border: 0;
    background-color: red;
    border-bottom: 1px solid blue;
    -moz-box-sizing: content-box;
}

Demo

这篇关于Firefox包含< hr>高度的边框而铬不的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！