在chrome / IE中，浮动div旁边的字段集在右侧溢出，在FF中下一行

Question

I am using Bootstrap 3. I have a containing element containing a floated div and a fieldset. The floated div is 100% width so the fieldset should sit below it. This works in FF (which I was using to develop) but in chrome/IE, the fieldset overflows out of container and sits to the right of float .

 .container{ width:300px; position:relative; border:1px solid red; } .float{ float:left; width:100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div style="float:left;width:100%;"> <a >Select All</a> / <a >Select None</a> </div> <fieldset>fieldset</fieldset> </div> 

I can fix it by adding clear:left; to the fieldset.

Which browser is correct? It seems like FF is in the wrong. What rule is FF breaking or excepting to cause this to render differently? Is this a bug?

Noting that when not using bootstrap, it renders as expected in all browsers I tested. Within bootstrap, if I use a div instead of a fieldset, it also renders the same across browsers.

Answer 1

Looks like it's the fieldset default styling being over-ridden by the Bootstrap CSS. It's applying a min-width: 0 to fieldset which is causing the element to have no width. Not sure why this was added to Bootstrap but it's probably something to do with it's expected content being actual form fields as opposed to just text as per your example. Try adding some valid form HTML as per the MDN link to see if that improves your situation.