Definir borda inferior de 1px para todos os navegadores
Tudo bem pessoal!
Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
A estrutura é a seguinte:
==========CSS
html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
{
margin: 0px;
padding: 0px;
border:none;
outline:none;
list-style-type:none;
box-sizing: border-box;
}
*
{
font-size: 14px;
font-family: verdana, arial;
}
.container
{
width: 608px;
height: 421px;
margin: auto;
margin-top: 50px;
overflow: hidden;
}
.box_one, .box_two
{
display: inline-block;
width: 300px;
height: 250px;
overflow: hidden;
}
.border_bottom
{
border-bottom: #f5f5f5 solid 1px;
}
.border_bottom_white
{
border-bottom: #fff solid 1px;
}
.espaco
{
margin-right: 2px;
}
.box_tree, .box_four, .box_fift
{
display: inline-block;
width: 198px;
height: 149px;
margin-top: 20px;
overflow: hidden;
}
.vertical
{
vertical-align: top;
}
============HTML
<content>
<div class="container">
<div class="box_one border_bottom_white espaco vertical">box one in first line</div>
<div class="box_two border_bottom vertical">box two in first line</div>
<div class="box_tree espaco border_bottom vertical">box tree in second line</div>
<div class="box_four espaco border_bottom vertical">box four in second line</div>
<div class="box_fift border_bottom vertical">box fift in second line</div>
</div>
</content>
O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box; o font-size e o font-family.
Essa configuração do CSS foi a mais próxima do desejável.
A estrutura do HTML precisa ser essa aí.
Agradeço desde já.Discussão (0)
Carregando comentários...