Fieldset with display: table-column disappears entirely in IE8 & IE9

一个人想着一个人 提交于 2019-12-13 07:22:56

问题


I just spent some trying to figure out why some form content vanished entirely in IE8 & IE9. After some investigation, it looks like it's the fault of having fieldset set to display:table-column. If I set fieldset to display:table or display:block then everything shows up fine, again.

When testing this html on my IE8 & IE9 virtual machines, I can see only the heading "Not inside a fieldset". If I remove the fieldset styling, I can see both.

Does anyone know why this happens?

<html>
<head>

<style type="text/css">
fieldset
{
display: table-column; 
vertical-align: top
}
</style>
</head>

<body>
<form>
    <fieldset>
    <div class="row">
        <h6>Inside a fieldset</h6>
    </div>
    </fieldset>
<form>

<h6>Not inside a fieldset</h6>
</body>
</html>

回答1:


The display: table-column means it acts like the <col> tag in HTML. The <col> tag is an invisible element which is used to specify properties of the column like styles etc. It is not the same as <td> (which is display: table-cell).

You should use table-cell instead.

W3C Spec

Source - Random832's answer in this SO Thread

EDIT: table-column still gets displayed in IE 7, FireFox 24, Chrome and Opera 15. It doesn't work in IE 8, 9 and 10.




回答2:


All elements are default positioned to vertically top. You need not to write any extra code. I believe below code should suffice:

<html>
<head>

<style type="text/css">
fieldset
{
height: 50px;  /*************** Not Required, Just to show what I mean by my sentence     mentioned above :) ****************/
}
h6,div {
margin: 0; padding:0;
}

</style>
</head>

<body>
<form>
<fieldset>
<div class="row">
    <h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>

<h6>Not inside a fieldset</h6>
</body>
</html>


来源:https://stackoverflow.com/questions/19479871/fieldset-with-display-table-column-disappears-entirely-in-ie8-ie9

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!