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>标记及其内容被强制适应<fieldset>大小的96％，无论它是什么，并且<fieldset>是浮动的左，再向左漂浮<fieldset>，其宽度小于100％的差异将适合同一水平，这是我的目标。

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

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

Answer 2

  

当你在CSS中给元素宽度为100％时，基本上就是这样   说“使这个元素的内容区域与显式完全相同”   其父级的宽度 - 但仅当其父级具有明确的宽度时。“

这意味着如果未明确设置父容器的宽度，即width:400px，则它不应按预期工作（不同浏览器的行为不同），因为子元素的values set in Percentage首先计算维度父容器然后子元素应用它的维度，比如宽度。

You can read this。

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