Quebra de layout com menu superior em navegadores diferentes

Front-end
, ,
#1

Galera, estou tendo problemas no meu menu superior, quanto o tamanho da barra preta que fica marcando a área de menu e o tamanho área de cada

  • do meu menu. No google chrome fica tudo de boa, aí quando passo pra testar em outros navegadores tudo desanda… vou colocar umas fotos e o código, pra vocês sacarem.

    Chrome fica tranquilo…

    No Firefox já não rola… a border fica passando da área negra do menu, e dessa forma acontece com o edge e o IE.

    Código HTML

    >     <!DOCTYPE html>
>     <html>
>     <head>
>     	<title>Introdução</title>
>     	<meta charset="utf-8">
>     	<link rel="stylesheet" type="text/css" href="../css/menu.css">
>     </head>
>     <body>
>     	<header>
>     		<nav id="menu-principal">
>     			<figure id="logo">
>     				<h1><a href="index.html"><img src="../image/logo.png" alt="Logomarca Front-End Development"></a></h1>
>     			</figure>
>     			<ul id="lista-menu">
>     				<li><a href="introducao.html">INTRODUÇÃO</a></li>
>     				<li><a href="html&css.html">HTML & CSS</a></li>
>     				<li><a href="js&jquery.html">JAVASCRIPT & JQUERY</a></li>
>     				<li><a href="tutoriais.html">TUTORIAIS</a></li>
>     			</ul>
>     		</nav>
>     	</header>
>     	<div class="content">
>     		<p style="text-align:center;">INTRODUÇÃO</p>
>     	</div>
>     </body>
>     </html>

    Código CSS
> *{ margin: 0; padding: 0; font-family: arial, sans-serif; }
> a, li{ list-style: none; text-decoration: none; font-size: 15px;} /* tom de roxo: #744852; tom de rosa: #d75c6b; */

    > header {
> 	background-color: rgba(0,0,0, 0.8);
> 	height: 50px;
> }

    > #logo img {
> 	width: 150px;
> 	position: absolute;
> 	left: 50px;
> 	margin-top: -10px;
> }

    > #lista-menu{
> 	margin-top: 16px;
> 	float: right;
> 	margin-right: 50px;
> }

    > #lista-menu li{
> 	display: inline-block;
> }

    > #lista-menu li a{
> 	color: #fff;
> 	padding: 18px 15px 13px;
> }

    > #lista-menu li a:hover{
> 	color: #d75c6b;
> 	background-color: #fff;
> 	border-bottom: 4px solid #d75c6b;
> }
    • #2

    Eu ia resolver o problema no seu código, mas estou sem tempo para remover aqueles sinais de “maior >” e sem um editor de códigos no momento :stuck_out_tongue:

    O que está acontecendo é isso, cada navegador tem suas próprias definições “Defaulteadas” nos elementos HTML.

    Você deve zerar as MARGINS E PADDINGS da UL e LI para ver se consegue chegar a uma compatibilidade boa com os navegadores, vai testando zerar as propriedades do seu menu para chegar num bom resultado.

    Boa sorte!