La larghezza dell'elemento DOM può essere non intera?

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

Domanda

Ho qualche pagina i cui elementi div sono allineati da JavaScript. JavaScript controlla solo una serie di elementi div per trovare il massimo offsetWidth , quindi imposta tutti gli elementi div 'width per essere il massimo offsetWidth . Funziona perfettamente nella maggior parte dei browser e locali, ma fallisce su Francia-Francia in Firefox su Mac. In questo caso, il contenuto di div wrapping. 

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

per HTML sopra, sotto codice rapporto " 79 " ;. 

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

ma sotto il rapporto sul codice " 79.1333px " ;. 

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

Il divario tra 79.1333 e 79 rende errato width impostato su stile incorporato.

Pensavo che offsetWidth e width dovessero sempre essere numeri interi. Esiste un modo per arrotondare correttamente offsetWidth ?

È stato utile?

Soluzione

C'è una differenza tra la regola di stile CSS (che getComputedStyle () o getStyle () di Renzo Kooi ti darà) e la larghezza calcolata effettiva in pixel come determinato da l'agente utente.

Ciò è in parte dovuto al fatto che nei CSS sono possibili valori parziali dei pixel, ma l'agente utente deve scegliere come renderizzare i pixel parziali (attualmente, credo che tutti arrotondino per eccesso o per difetto, ma sono molto incoerenti, in particolare durante la traduzione percentuali in pixel [vedi qui ]).

È importante che esistano queste differenze, in particolare quando gli interpreti implementano lo zoom a pagina intera.

Ad esempio, ho realizzato un caso di prova con questo: 

<!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>

Zoomato in un passaggio in Safari 4 Beta, la larghezza CSS è riportata come 17,5px e l'altezza 16,1333px. Ma il suo offsetWidth è di 21 pixel del dispositivo e il suo offsetHeight è di 19 pixel del dispositivo.

La morale della storia, in breve, è che se vuoi abbinare le dimensioni effettive di un elemento, è meglio usare i suoi valori CSS così come sono, anche se non sono interi.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top