html - Bootstrap 3 checkbox center alignment and float: none seems to be ignored in IE -


first of here bootply sandbox: demo of issue. rendered expected in chrome , ff, float: none seems ignored in ie.

steps:

the thing i've added basic starter bootply template following markup:

<div class="checkbox">   <input id="mycheckbox" style="float: none;" type="checkbox">   <label for="mycheckbox">my checkbox</label> </div> 

this div inside , original <div class="text-center"> text and checkbox horizontally center aligned... if apply float: none input element.

the problem in ie (all versions including 11) float: none seems ignored, checkbox still aligned left, way far label. issue detected in pretty complex page used kendo, bootstrap, custom bootstrap theme (inspinia) + custom styles, i've succeded isolate in simple bootstrap demo.

in pictures:

correct rendering in chrome , ff:

enter image description here

very same markup incorrect rendering in ie 11:

enter image description here

missed something? have checkbox center aligned. margins not option, because page should responsive, , container resized.

i not sure why works in chrome , ff , not in ie, , browser "right" (probably not ie i'm guessing...), problem in ie position: absolute checkbox gets boostrap css. if add position: relative checkbox in addition float: none rendered expected in ie well.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -