A largura do elemento DOM pode ser não inteira?

StackOverflow https://stackoverflow.com/questions/637358

Pergunta

Eu tenho uma página cujos elementos div estão alinhados por JavaScript. O JavaScript basta verificar um conjunto de elementos de div para encontrar o máximo OffsetWidth, então defina todos os elementos div ' largura para ser o máximo OffsetWidth. Funciona perfeito na maioria dos navegadores e locais, mas falha no francês em Firefox no Mac. Nesse caso, o conteúdo da div se envolve.

<div id="divFoo">
    Heure de d&#233;but :
</div>

Para HTML acima, o relatório de código abaixo "79".

javascript:alert(document.getElementById('divFoo').offsetWidth);

Mas o relatório do código abaixo "79.1333px".

javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))

A lacuna entre 79.1333 e 79 torna incorreto largura definido como estilo embutido.

Eu costumava pensar que OffsetWidth e largura deve sempre ser inteiro. Existe alguma maneira de fazer OffsetWidth redondo corretamente?

Foi útil?

Solução

Há uma diferença entre a regra do estilo CSS (que getComputedStyle() ou Renzo Kooi's getStyle() dará a você) e a largura computada real em pixels, conforme determinado pelo agente do usuário.

Isso se deve em parte ao fato de que os valores parciais de pixels são possíveis no CSS, mas o agente do usuário deve escolher como renderizar pixels parciais (atualmente, acredito que eles estão em volta ou para baixo, mas são muito inconsistentes, principalmente quando se traduzem percelantes em pixels [Vejo aqui]).

É importante que essas diferenças existam, principalmente porque os agentes de usuários implementam o zoom completo da página.

Por exemplo, fiz um caso de teste com isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Fractional pixels</title>
    <style type="text/css" media="screen">
        #fractional {
            width: 17.5px;
            height: 16.1333px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="fractional"></div>
</body>
</html>

Zoom em uma etapa no Safari 4 beta, a largura do CSS é relatada como 17,5px e a altura 16.1333px. Mas é offsetWidth são 21 pixels de dispositivo e seu offsetHeight são 19 pixels de dispositivos.

A moral da história, em suma, é que, se você quiser igualar as dimensões reais de um elemento, é melhor usar seus valores CSS como está, mesmo que não sejam integrantes.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top