El código es así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html { border: 1px solid black; padding: 0; } body { width: 100px; height: 100px; border: 10px solid red; padding: 10px; margin: 10px; } div { width: 100px; height: 100px; border: 10px solid black; padding: 10px; margin: 10px; } </style> </head> <body> <div id="div"></div> </body> </html> ¿Por qué el valor offsetLeft del elemento div es offsetLeft es 41? Debería ser div.leftMargin + body.leftPadding = 20px.
¿Es esto un error de Chrome o entendí mal offsetLeft ?
Parece que Chrome y Firefox han interpretado las cosas de manera diferente.
Desde MDN :
La propiedad de solo lectura HTMLElement.offsetParent devuelve una referencia al elemento que es el elemento antecesor más cercano (el más cercano en la jerarquía de contención). Si no hay un elemento ancestro posicionado, se devolverá el ancestro más cercano td, th, table, o el cuerpo si tampoco hay elementos de la tabla ancestro.
Sin embargo, parece que Chrome no está usando el cuerpo como el ancestro más cercano en este caso, sino que está volviendo al elemento html. Si le da al elemento del cuerpo una posición: relativa, entonces Chrome le da un desplazamiento izquierdo de 30.
Aquí hay un fragmento para jugar: pruebe diferentes tamaños de caja y diferentes posiciones, o no, del cuerpo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { box-sizing: border-box; } html { border: 1px solid black; padding: 0; } body { width: 100px; height: 100px; border: 10px solid red; padding: 10px; margin: 10px; } #div { width: 100px; height: 100px; border: 10px solid black; padding: 10px; margin: 10px; } </style> </head> <body style="position: relative;"> <div id="div"></div> <script> alert(document.querySelector('#div').offsetLeft); </script> </body> </html>Entonces, me doy cuenta de que esto es más un comentario / observación extenso que una respuesta completa, pero demasiado largo para un comentario. Con suerte, alguien más puede explicar completamente y/o encontrar una referencia a un posible error de Chrome/interpretación diferente.