html - Firefox：以 % 为单位的宽度问题

Question

我无法弄清楚为什么以下内容适用于 Internet Explorer 和 Chrome，但不适用于 Firefox。它基本上对Firefox没有影响：

<fieldset style="width:30%;">

谢谢，

Answer 1

虽然这几天我一直专注于这个问题，但我发现问题不在于<fieldset>标签，而在于其中的<label>标签。

基本上，我styled是<label>这样标记的，问题就消失了。

<fieldset style="width:29%;float:left">         
    <label style="width:96%">Imagem</label>
    <?php echo $this->Form->input('main_image', array('type' => 'file','label'=>FALSE,'style'=>'120px')); ?>
</fieldset>

现在对于这种特定情况，<label>标签及其内容被迫适应大小的 96%，<fieldset>无论它是什么，并且由于<fieldset>是向左浮动，因此不再<fieldset>向左浮动并且其宽度小于 this 和 100 的差异% 将适合同一水平，这是我的目标。

显然，Firefox 并没有强制<label>标签服从其父<fieldset>标签。相反，它被迫<fieldset>适应<label>。也许<label>是css我不知道的风格。

感谢所有试图提供帮助的人。

Answer 2

当您在 CSS 中为元素指定 100% 的宽度时，您基本上是在说“使该元素的内容区域与其父元素的显式宽度完全相等，但前提是其父元素具有显式宽度。”</p>

这意味着如果您的父容器的宽度没有明确设置，即width:400px它不应该按预期工作（不同的浏览器表现不同），因为values set in Percentage子元素首先计算父容器的尺寸，然后子元素应用它的尺寸，说宽度。

你可以阅读这个。

您也可以使用css reset使所有浏览器的 css 保持一致。