Firefox:宽度(% issue )

Question

我不明白为什么下面的方法可以在I和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>，它的宽度小于this和100%的差值，这是我的目标。

显然，火狐并没有强迫<label>标签服从它的父标签-- <fieldset>标签。相反，它迫使<fieldset>适应<label>。也许我css中的某个地方的<label>是我不知道的风格。

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

Answer 2

当你在CSS中给一个元素一个100%的宽度时，你基本上是在说“让这个元素的内容区域完全等于它的父元素的显式宽度--但前提是它的父元素有一个显式的宽度。”

这意味着如果您的父容器的宽度没有显式设置，即宽度，那么它不应该像预期的那样工作(不同的浏览器行为不同)，因为子元素的values set in Percentage首先计算父容器的尺寸，然后子元素应用它的尺寸，比如宽度。

。

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