UL display failure at the time

Question

I have a UL and its li’s has 50px of height. In this case the height of UL must obey these 50px

Turns out in some li’s I have images in them and this is causing a augmentation in height of li.

The problem: It only occurs in the Chrome.

Is there any hack to correct this?

See on Firefox. (Failure does not occur) Now on the Chrome

I’m still learning CSS.

/* CSS Document */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
*, 
*:before, 
*:after, 
*:active, 
*:hover {
    font-family: 'Open Sans';
	margin: 0;
	padding: 0;
    border:0;
    outline: none;	
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/
}
ul {
	list-style: none;

}
ul li {	
	height: 50px;	
}
ul.topo{
	background-color: #CCCCCC;
	color: #FFFFFF;
}
ul.topo li {
	text-align: center;
}
ul.ulHorizontal {	
}
ul.ulHorizontal li {
	display: inline-block;
	line-height: 50px;
}
ul.ulHorizontal li img {
    vertical-align: middle;
}

img {
    max-width: 100%;
}
a, a:hover {
    text-decoration: none;
}
button, 
input[type=button], 
input[type=submit], 
input[type=reset] {
	cursor: pointer;
	background-color: #CCCCCC; 
}
button:hover, 
input[type=button]:hover, 
input[type=submit]:hover, 
input[type=reset]:hover {
	background-color: #DCDCDC; 
	border: 1px rgba(0,0,0,.2) solid;
}
button:active, 
input[type=button]:active, 
input[type=submit]:active, 
input[type=reset]:active {
	background-color: #FFFFFF; 
}
/************   CORES   **************/
.bgcCinza100 {
	background-color: #CCC;
}
.bgcCinza25 {
	background-color: #DCDCDC;
}
.bgcPreto100 {
	background-color: #000;
}
.bgcBranco100 {
	background-color: #FFF;
}
.bgcVermelho100 {
	background-color: #F00;	
}
.bgAzulCiano {
	background-color: #007EAE;
}
/************   CORES   **************/
.btnCarrinho {
	width: 50px;
	height: 25px;
	line-height: 15px;
	text-align: center;
}

ul#menuCategorias li {
	height: 50px;	
	text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ulHorizontal topo">
   <li style="width:200px">CATEGORIA</li><!--
--><li style="width:200px">NOME</li><!--
--><li style="width:100px">PREÇO</li><!--
--><li style="width:100px">FRETE</li><!--
--><li style="width:100px">TRANSPORTE</li><!--
--><li style="width:100px">EDITAR</li><!--
--><li style="width:100px">BLOQUEIO</li><!--
--><li style="width:100px">EXCLUIR</li>
</ul>
<ul class=ulHorizontal id=listaRegistros style="background-color:#F8F8F8">
  <li style="text-align:left; width:200px;">Leve</li><!--
--><li style="text-align:left; width:200px;">Produto 1</li><!--
--><li style="text-align:right; width:100px;">120.33</li><!--
--><li style="text-align:center; width:100px;"><img src ="imgs/iconeDedoJoia.png" style="height:45px;" title="Com Frete Grátis" /></li><!--
--><li style="text-align:center; width:100px;"><img src ="imgs/iconeCorreiosCaminhao.png" style="height:45px;" title="Correios" /></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&editar&idProdutos=1"><img src="imgs/editar.png" height="30px"  title="Editar Produto"/></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&bloquear&idProdutos=1" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px"  title="Bloquear Produto" /></a></li><!--
--><li style="text-align:center; width:100px;"><a href="?produtos&excluir&idProdutos=1" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px"  title="Excluir Produto"/></a></li>
</ul>

I know if I add the height of li’s that is of 50px à UL.

<ul style='height=50px'>...</ul>

that will solve the problem.

But, it would be correct to do this since it is not pattern for all the browsers?

Answer 1

The most appropriate for this case would be to use html Tables, because to make tables like these they serve much better.

Try changing your code to

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Categoria</th>
        <th>Nome</th>
        <th>Preço</th>
        <th>Frete</th>
        <th>Transporte</th>
        <th>Editar</th>
        <th>Bloqueio</th>
        <th>Excluir</th>
    </tr>
    <tr>
        <td>Leve</td>
        <td>Produto 1</td>
        <td>120.33</td>
        <td><img src="imgs/iconeDedoJoia.png"></td>
        <td><img src="imgs/iconeCorreiosCaminhao.png"></td>
        <td><img src="imgs/editar.png"></td>
        <td><img src="imgs/bloquear.png"></td>
        <td><img src="imgs/excluir.png"></td>
    </tr>
</table>

It is worth remembering that for a better organization in the code it is always good to leave all the css in an external file.