html - Safari: table-layout: fixed in absolutely positioned element doesn't stretch parent -
i have div
display: table; table-layout: fixed; width: 100%
child of div
position: absolute
. on chrome, ie, , firefox, child div table-layout: fixed
makes parent div
expand 100%
, in safari (6.0.4, os x 10.8.3) doesn't happen. here's picture
and jsbin http://jsbin.com/oqupah/6/edit (make sure open output in new window). markup this:
<div style="position:absolute;border: 1px solid black"> <div style="display:table;table-layout:fixed;width:100%;border:1px solid red;"> <div style="display:table-cell;border:1px solid green">a</div> </div> </div>
this html 5 , xhtml 1.0 doctypes. noticed if remove doctype in safari, behave other browsers, removing doctype not option.
in practice, had code when implementing absolutely positioned popup, content of popup div
display: table; table-layout: fixed; width: 100%
. want popup stretch 100% can provide max-width
, if window resized, popup shrink accordingly.
so i'm guessing bug in safari? behavior on mobile safari same. there can add make behave other browsers?
fix add right: 0
absolutely positioned div
... wasted time on this.
Comments
Post a Comment