<fieldset>调整错误; 似乎有不可移除的`min-width:min-content`

Question

<fieldset>调整错误; 似乎有不可移除的`min-width:min-content`

问题

我有一个<select>在那里它的一个<option>的文本值是很长.我想要<select>调整大小,因此它永远不会比它的父级宽,即使它必须切断其显示的文本.max-width: 100%应该这样做.

在调整大小之前:

调整大小之前的页面,显示整个<code><select></code>,则可以看到内部的select <code><fieldset></code>无法缩小其宽度.</p>

<p>调整大小后我实际看到的内容:</p>

<p><img rel=

但是,使用a <div>而不是a<fieldset>的等效页面可以正确缩放.如果您在一个页面上拥有a 和a ,并且彼此相邻,则可以更轻松地查看并更改测试更改.如果删除周围的标签,则调整大小有效.该标签在某种程度上导致水平尺寸调整打破.<fieldset><div><fieldset><fieldset>

这些<fieldset>行为就好像有一条CSS规则fieldset { min-width: min-content; }.(min-content粗略地表示不会导致孩子溢出的最小宽度.)如果我<fieldset>用a <div>替换min-width: min-content,它看起来完全一样.然而min-content,我的样式,浏览器默认样式表中没有规则,或者在Firebug的CSS Inspector中可见.我试图覆盖<fieldset>Firebug的CSS Inspector和Firefox的默认样式表forms.css中可见的每个样式,但这没有帮助.特别重写min-width,width也没有做任何事情.

码

字段集的HTML:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

Run Code Online (Sandbox Code Playgroud)

我的CSS应该工作但不是:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

将width属性重置为默认值不会执行任何操作:

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Run Code Online (Sandbox Code Playgroud)

进一步的CSS,我尝试并无法解决问题:

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

背景目标和要求

我试图这样做的原因是为具有大表单的现有页面编写移动样式的一部分.表单有多个部分,其中一部分包含在一个部分中<fieldset>.在智能手机上(或者如果您使浏览器窗口变小),页面中的部分<fieldset>比表单的其余部分宽得多.大多数表单都限制了它的宽度,但是没有的部分<fieldset>会强制用户缩小或向右滚动以查看所有部分.

我很想删除它<fieldset>,因为它是在一个大应用程序的许多页面上生成的,我不确定CSS或JavaScript中的哪些选择器可能依赖它.

如果需要,我可以使用JavaScript,而JavaScript解决方案总比没有好.但是,如果JavaScript是唯一的方法,我很想知道为什么只使用CSS和HTML无法实现这一点.

编辑:浏览器支持

在网站上,我需要支持Internet Explorer 8及更高版本(我们只是放弃了对IE7的支持),最新的Firefox以及最新的Chrome.此特定页面也适用于iOS和Android智能手机.Internet Explorer 8可以接受稍微降级但仍可使用的行为.

我在不同的浏览器上重新测试了我的破坏的fieldset例子.它实际上已经在这些浏览器中工作:

Internet Explorer 8,9和10
铬
适用于Android的Chrome

它打破了这些浏览器:

火狐
适用于Android的Firefox
Internet Explorer 7

因此,我关心当前代码中断的唯一浏览器是Firefox(在桌面和移动设备上).如果代码被修复,所以它在Firefox中工作而不会在任何其他浏览器中破坏它,这将解决我的问题.

该网站的HTML模板使用Internet Explorer条件注释添加类,.ie8并.oldie给<html>元素.如果需要在IE中处理样式差异,可以在CSS中使用这些类.添加的类与此旧版HTML5 Boilerplate中的相同.

Answer 1

Jor*_*ray 341

更新(2017年9月25日)

令我非常欣慰的是,下面描述的Firefox bug在Firefox 53中已经修复,并且这个答案的链接最终已从Bootstrap的文档中删除.

修复

在WebKit和Firefox 53+中,您只需min-width: 0;在字段集上设置覆盖默认值min-content.¹

不过,对于fieldsets来说,Firefox有点奇怪...... 若要在早期版本中使用此功能,必须将display字段集的属性更改为以下值之一:

table-cell (推荐的)
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

其中,我推荐table-cell.双方table-row并table-row-group阻止您更改宽度,而table-column并table-column-group阻止您更改高度.

这将(在某种程度上合理地)打破IE中的渲染.由于只壁虎需要这个,你可以名正言顺地使用@-moz-document的酮Mozilla的专有的CSS扩展 -to从其他浏览器隐藏:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

Run Code Online (Sandbox Code Playgroud)

(这是一个jsFiddle演示.)

这解决了问题,但如果你像我一样,你的反应就像是...

什么.

有是有原因的,但它不是漂亮.

fieldset元素的默认表示是荒谬的,基本上不可能在CSS中指定.想一想:fieldset的边框在与图例元素重叠的地方消失,但背景仍然可见!没有办法用任何其他元素组合来重现这一点.

最重要的是,实现充满了对遗留行为的让步.其中之一是字段集的最小宽度永远不会小于其内容的固有宽度.WebKit为您提供了一种通过在默认样式表中指定它来覆盖此行为的方法,但Gecko²更进一步并在渲染引擎中强制执行它.

但是,内部表元素构成了Gecko中的特殊帧类型.具有这些display值集的元素的维度约束在单独的代码路径中计算,完全绕过对字段集强加的强制最小宽度.

再次 - 这个问题已经在Firefox 53中修复了,所以如果你只针对新版本,你就不需要这个黑客.

使用`@-moz-document`安全吗？

对于这个问题,是的. @-moz-document在所有版本的Firefox中按预期工作,直到53,修复了这个错误.

这不是偶然的.部分由于这个答案,限制@-moz-document用户/ UA样式表的错误取决于首先修复的基础字段集错误.

除此之外,我不再建议@-moz-document在CSS中专门针对Firefox,尽管还有其他资源

¹值可能是前缀.根据一位读者的说法,这在Android 4.1.2 Stock Browser和其他旧版本中没有任何影响; 我没有时间来验证这一点.

²本回答中指向Gecko源的所有链接均指2013年7月29日提交的5065fdc12408变更集 ; 您可能希望将注释与Mozilla Central的最新版本进行比较.

³参见例如SO#953491:仅针对具有CSS和CSS技巧的Firefox:针对高端网站上广泛引用的文章,针对Firefox的CSS攻击.

这是一个绝对精湛的答案 - 彻底,研究和简洁.谢谢. (30认同)
当然,这是一个绝对精湛的答案![Bootstrap官方文档](http://getbootstrap.com/css/#tables)指向此处 (16认同)
我刚刚注意到修复程序在IE中出现了,只是来到这里并发现你已经在解决方案中编辑过了.谢谢!Gecko hack解决方案在每个浏览器中都适用于我. (5认同)

Answer 2

boa*_*ars 11

iOS上的Safari问题与选定的答案

我发现Jordan Gray的答案特别有帮助.但是它似乎没有为我在Safari iOS上解决这个问题.

对我来说问题很简单,如果其中的元素的最大宽度为%宽度,则字段集不能具有自动宽度.

修复问题

简单地将字段集设置为具有100%宽度的容器似乎可以解决这个问题.

例

fieldset {
    min-width: 0; 
    width: 100%; 
}

Run Code Online (Sandbox Code Playgroud)

请参阅下面的工作示例 - 如果从字段集中删除%宽度或将其替换为auto,它将无法继续运行.

JSFiddle | Codepen

归档时间：	12 年，4 月前
查看次数：	89006 次
最近记录：	7 年，7 月前

<fieldset>调整错误; 似乎有不可移除的`min-width:min-content`

问题

码

更多细节

背景目标和要求

编辑:浏览器支持

更新(2017年9月25日)

修复

什么.

使用@-moz-document安全吗？

使用`@-moz-document`安全吗？