1

Estou tendo uma baita dor de cabeça com o google chrome.

Parece ser um bug dessa versão do chrome, mas ao inserir float:right, display:inline-block ou qualquer forma de deixar dois elementos paralelos, um ao lado do outro, quando tento abrir no chrome surge uma formatação estranha onde um dos elementos fica posicionado acima do outro.

Encontrei um bug na versão 25 do chrome onde ele fazia a mesma coisa, porém apenas quando o elemento que contém continha a propriedade clear.

Uma comparação:inserir a descrição da imagem aqui (Obs. desconsiderem a bordinha no sair, eu estava no modo de inspecionar elementos)

<header>
    <div id="banner">
    <a href="time.php">
        <div id="logo" title="Seguro, prático e rápido!"></div>
    </a>
    <form id="login">
        <label>Bem vindo a overip,  - </label>
        <br>
        <label>Login às </label>
        <input type="button" id="menu-servicos" class="button" value="" style="display:inline-block">
        <input type="submit" name="sair" class="button" value="Sair">           
    </form>
</div>
</header>

CSS -

header, aside, section, footer{ display:inline-block; }
header{
    width:100%;
    clear:both;
}
#banner{
    background: url("../image/menu-bg.png") no-repeat center top;
    position: relative;

    overflow: auto;
    -webkit-box-shadow: 0px 3px 11px #000000;
    -moz-box-shadow: 0px 3px 11px #000000;
    -ms-box-shadow: 0px 3px 11px #000000;
    -o-box-shadow: 0px 3px 11px #000000;
    box-shadow: 0px 3px 11px #000000;
}
#logo{
    background:url("../image/logo.png") no-repeat;
    background-size: 100%;

    width: 115px;
    height: 60px;
    display: inline-block;
    float:left;

    margin: 1% 0 1% 10%;
}
#login{
    display: inline-block;
    margin: 0.5% 0 1% 25%;
    font-style: italic;
    font-weight: bold;

    float:left;
}
#menu-servicos{
    margin-left: 10px;
    background:url("../image/arrows.png") no-repeat #FF9E02 center center;
    background-size: 30%;
    min-width: 68px;
}
#menu-servicos:hover{
    background-color: #E88F00;
}
.button{
    border: medium none;
    font-size: 9pt;
    padding: 2px 20px;
    line-height: 20px;
    cursor: pointer;
    margin: 10px 0px;
    border-radius: 5px;
    -o-border-radius: 5px;          
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: none repeat scroll 0% 0% #FFB502;
    font-weight: bold;
    text-transform: uppercase;
    min-width: 68px;
}

Essa é a versão atual dele, já tentei bastante coisa entre os botões (float, inline-block) e nas divs containers.

3
  • 2
    É necessário você postar essa parte de seu código aqui para entendermos. Commented 25/09/2014 às 19:29
  • 1
    Em alguns casos, basta uma quebra de linha entre esses dois elementos para isso acontecer. De igual forma, existem definições de CSS afetam a forma como os elementos são renderizados no eixo X que em conjunto com as que mencionaste podem originar esse desalinhamento. A tua markup HTML e respetivas definições de CSS são necessárias para te ajudarmos melhor.
    – Zuul
    Commented 25/09/2014 às 19:36
  • Já inseri os códigos.
    – VitorLuizC
    Commented 26/09/2014 às 14:57

2 Respostas 2

1

Cara, estou sem tempo para estudar a causa do problema, mas... use

.button{
    vertical-align: top;
}

...que resolve, pelo menos aqui resolveu.

Abrçs

1
  • Eu usei vertical-align:middle, porque o top deixou a label no alto.
    – VitorLuizC
    Commented 29/09/2014 às 16:02
1

Veja se lhe ajuda: http://jsfiddle.net/Borachio/k251jeem/

Fiz uma pequena adaptação no html, colocando o label e as duas inputs dentro de um div. Aqui está bem alinhado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .