Me estoy quedando en una situación en la que 3 divs con anchos de 33%, 34% y 33% no suman el mismo número de píxeles como un div con un 100% de ancho. Considere los siguientes fragmento de código html:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ios math test</title>
</head>
<body>
<div style="width:100%; height:3em; background-color: green;"></div>
<div style="width:33%; height:3em; float:left; background-color: red;"></div>
<div style="width:34%; height:3em; float:left; background-color: red;"></div>
<div style="width:33%; height:3em; float:left; background-color: red;"></div>
</body>
</html>
Te darás cuenta de que safari en el iphone, ipad, e incluso de escritorio instancias de iOS va a mostrar el div que tiene el 100% de como ser más largo que la suma de los anchos de los divs debajo de ella. Esto parece extraño.
Todos los dispositivos de apple que he probado presentan este comportamiento(safari en un macbook, safari en ipad, safari en un iphone, chrome en un ipad, chrome en un iphone, etc...). No presentan este comportamiento al utilizar chrome en un cuadro de windows, o safari en un cuadro de windows, o android.
He aquí un jsfiddle: http://jsfiddle.net/zd6wx/
¿Cuál es la manera correcta de representar esto en un dispositivo iOS (safari, chrome, etc...) que también funciona en otros dispositivos (por ejemplo, android)? No quiero usar tablas, y sólo quiero usar javascript como una opción de último recurso.
Gracias
resultados en tendales perfecta razón es obvia!
