css - How do I get IE < 10 to apply negative margins? -
i have list of items, want present in grid. keep flexible, i'd prefer have elements float inside container , control width percentage. e.g.:
<div style="overflow:hidden"> <div style="float:left ; width:25%">element 1</div> <div style="float:left ; width:25%">element 2</div> <div style="float:left ; width:25%">element 3</div> <div style="float:left ; width:25%">element 4</div> <!-- etc. --> </div>
now, have gutter between these cells. again, simple enough - apply margin or padding cells. however, gives me gutter on edges of container, not want.
to around this, have created 2 containers within each other, inner container gets negative margin equal padding of cells. works in modern browsers, fails in ie 9 , older. don't care ie 7 , backwards, ie 8 + 9 still have big market share ignore.
so question is: why ie 8 + 9 not give me negative horizontal margin in following fiddle (note does give vertical negative margin - doesn't same horizontally). , of course, can fix this?
try put code on head
of page:
<meta http-equiv="x-ua-compatible" content="ie=edge" />
Comments
Post a Comment