1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

UL > LI - Aumenta a largura no chrome (Bug Chrome?)

Olá Pessoal, fiz um rodapé com alguns links que ficam centralizados de acordo com um script que eu fiz (Ele calcula a largura do conteúdo de todos os elementos dentro do container, seta o container para essa largura e centraliza ele) o script funciona corretamente e funciona no Firefox e no IE, no Chrome não, a primeira vista ele fica correto, mas quando eu clico em qualquer lugar da página o LI desses elementos aumentam em 7px e faz com que os containers quebrem a linha, vou postar os códigos referente a essa parte:

CSS

.containerRodape {
    height: 90%;
    margin: 0 20px 0 20px;
    float: left;
    outline: 0 none
}

/*Padrão titulos do Rodape*/
.containerRodape .titulo{
    font: 13px arial;
    color: #353535;
    font-weight: 600;
    margin: 10px 0;
    text-align: center;
}

/*Tentativas */
.linksRodape, .linksRodape > li{
    padding: 0;/*Não funciona*/
    list-style-type: disc;/*Se eu coloco none ele funciona mesmo depois de clicar na página, mas retira o marcador*/
    /*display: block;*//*Se eu coloco block ele funciona mesmo depois de clicar na página, mas retira o marcador*/
    margin: 0;/*Não funciona*/
}

.linksRodape a {
    color: #353535;
    font: 11px arial;
}/*Padrão links Rodape*/

HTML

<div class="Rodape" style="background-image:url(imagens/Barra_Rodape.png); height:200px; clear:both; margin-top: 10px">
    <div class="centerHorizontal">
        <div class="containerRodape">
            <div class="titulo">TKWAY</div>
            <ul class="linksRodape">
                <li><a href="Historia.html" target="#central">História</a></li>
                <li><a href="">Trabalhe na TKWAY</a></li>
                <li><a href="">Siga a TKWAY</a></li>
                <li><a href="Escritorio.html" target="#central">Escritório</a></li>
            </ul>
        </div>

        <div class="containerRodape">
            <div class="titulo">Ecosistema</div>
            <ul class="linksRodape">
                <li><a href="">Parceiros de Negócio</a></li>
                <li><a href="">Comunidades de turismo</a></li>
                <li><a href="">Órgãos e Secretarias</a></li>
            </ul>
        </div>
    </div>

</div><!--Fim Rodapé-->

Script - O problema não parece ser do script, de qualquer forma vou postá-lo

/*------------Plugin Largura total de um elemento-----------
 * Calcula a largura total de um elemento
 * ---------------------------------------------------------*/
$.fn.larguraTotal = function larguraTotal(){
    var total = 0;
    var valor = 0;
    var tipos = ['margin-left', 
                 'margin-right', 
                 'padding-left', 
                 'padding-right', 
                 'border-left-width', 
                 'border-right-width'];

    $.each(this, function(i, e){
        total = $(e).width();
        for(t in tipos){
            valor = parseFloat($(e).css(tipos[t]).replace('px',''));
            if(valor > 0)
                total+=parseInt(valor+0.01); /*ParseInt trunca e o valor de 0.01 é para os navegadores do IE que contam -0.01 do tamanho original*/
        }
    });

    return total;
};
/* ---------------------------------------------------------*/



/* Centraliza os elementos com a classe 'centerHorizontal'
 * --------------------------------------------------------*/
var horizontal=0;
$('.centerHorizontal').each(function(i, e){
    horizontal=0;
    $(e).find('> *').each(function(i, e){
        horizontal+=$(e).larguraTotal();
    });
    horizontal+=1;
    $(e).css({'margin-left':'auto', 'margin-right':'auto', 'width':horizontal});
});
/* --------------------------------------------------------*/

Os testes que eu fiz eu coloquei comentado no código CSS. Valores que aparecem no texto do link Tag a, e no LI:

antes de clicar: Tag(A): width: 99px -> Tag(LI) width: 99px

depois de clicar: Tag(A): width: 99px -> Tag(LI) width: 106px

Edit De acordo com @heber.jimmy e tambem ja respondendo a pergunta, eu ja testei utilizando padding: 5px para esses seletores e provavelmente mais

.linksRodape li, .linksRodape li a, .linksRodape li:focus, .linksRodape li a:focus

já com a configuração do .outerWidth() adicionada no javascript e já com a adição do campo 'outline-width' na procura do script das margens para contabilizar e mesmo assim o erro persiste. Depois de fuçar no chrome e levando em consideração o que já havia dito sobre o :focus, eu achei um botão no webkit que mostra os elementos que são afetados pelos pseudoElementos, e realmente ele adiciona os 5px no outline:

:focus {
outline: -webkit-focus-ring-color auto 5px;
}

só que eu sobrescrevi na minha página com :focus{outline:none} e tambem não funcionou, agora não sei mais o que fazer em css, o webkit não mostra mas nenhum pseudoElemento sendo utilizado e nem sobreescrevendo eu estou conseguindo parar essa quebra, parece que só de colocar o outline não importando a propriedade ele já quebra e já adiciona 7px, se é que existe alguma opção em css que remova essa propriedade.

  • não consegui simular. Consegue simular usando o jsfiddle? http://jsfiddle.net/sYC3k/

    heber.jimmy   11 de out de 2013
  • O bug não está acontecendo nesse editor pelo chrome, bom pode ver pelo site mesmo, já ta upado: link

    Mickdark   11 de out de 2013
  • pelo oq eu vi, é no evento onfocus que quebra o seu container. tenta adicionar o pseudo selector :focus, ex.: .linksRodape li:focus, .linksRodape li:active{border:none; outline:none;}

    heber.jimmy   11 de out de 2013
  • Estranho, não coloquei nenhum evento nesta parte, de qualquer forma vou testar!

    Mickdark   11 de out de 2013
  • Obrigado @heber.jimmy, mas não funcionou, tens mais alguma sugestão?

    Mickdark   11 de out de 2013
Mostrar todos os 21 comentários>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags html css javascript jquery design ou faça a sua própria pergunta.