问题

我有一个<select>，其中一个<option>的文本值非常长。我想要调整<select>的大小，以便它永远不会比它的父元素更宽，即使它必须切断其显示的文本。Max-width: 100%应该这样做。

调整前:

调整大小后我想要什么:

但是，如果您加载这个jsFiddle示例并将Result面板的宽度调整为小于<select>的宽度，您可以看到<fieldset>中的select无法缩小其宽度。

调整大小后我实际看到的情况:

但是，使用<div>代替<fieldset>的等效页面可以适当缩放。如果你在一个页面上有一个<fieldset>和一个<div>相邻，你可以更容易地看到和测试你的更改。如果您删除了周围的<fieldset>标记，则调整大小生效。<fieldset>标记以某种方式导致水平大小调整中断。

The <fieldset> acts is as if there is a CSS rule fieldset { min-width: min-content; }. (min-content means, roughly, the smallest width that doesn’t cause a child to overflow.) If I replace the <fieldset> with a <div> with min-width: min-content, it looks exactly the same. Yet there is no rule with min-content in my styles, in the browser default stylesheet, or visible in Firebug’s CSS Inspector. I tried to override every style visible on the <fieldset> in Firebug’s CSS Inspector and in Firefox’s default stylesheet forms.css, but that didn’t help. Specifically overriding min-width and width didn’t do anything either.

Code

fieldset的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>

我的CSS应该工作，但不是:

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

select {
    max-width: 100%;
}

将width属性重置为默认值不起任何作用:

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

进一步的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;
}

更多的细节

这个问题也出现在这个更全面、更复杂的jsFiddle示例中，它更类似于我实际试图修复的web页面。你可以看到<select>不是问题所在——一个内联块div也不能调整大小。虽然这个例子更复杂，但我认为对上面简单情况的修复也可以修复这个更复杂的情况。

[编辑:见下面的浏览器支持细节。]

关于这个问题的一个奇怪的事情是，如果你设置div.wrapper {width: 50%;}时，<fieldset>停止调整自己的大小，然后全尺寸的<select>将击中视口的边缘。调整大小发生时，就好像<select>的宽度为100%，即使<select>看起来它的宽度为50%。

如果你给<select>本身width: 50%，这种行为不会发生;宽度设置正确。

我不明白为什么会有这种差别。但这可能无关紧要。

我还发现了一个非常相似的问题，HTML fieldset允许孩子无限扩展。询问者找不到解决方案，并猜测除了删除<fieldset>之外没有解决方案。但我想知道，如果真的不可能使<fieldset>显示正确，为什么呢?什么在<fieldset>的规范或默认CSS(作为这个问题)导致这种行为?这个特殊的行为可能在某个地方有记录，因为许多浏览器都是这样工作的。

背景目标及要求

我试图这样做的原因是作为一个大表单的现有页面编写移动样式的一部分。表单有多个部分，其中一部分封装在<fieldset>中。在智能手机上(或者如果您将浏览器窗口设置得较小)，具有<fieldset>的页面部分要比表单的其余部分宽得多。大多数表单都能很好地限制它的宽度，但带有<fieldset>的部分却没有，迫使用户缩小或右滚动以查看该部分的所有内容。

我对简单地删除<fieldset>很谨慎，因为它是在一个大应用程序的许多页面上生成的，而且我不确定CSS或JavaScript中的选择器可能依赖于它。

如果需要，我可以使用JavaScript，有JavaScript解决方案总比没有好。但如果JavaScript是做到这一点的唯一方法，我很好奇为什么只使用CSS和HTML是不可能的。

---

编辑:浏览器支持

在网站上，我需要支持Internet Explorer 8及更高版本(我们刚刚放弃了对IE7的支持)，最新的Firefox和最新的Chrome。这个特殊的页面应该也适用于iOS和Android智能手机。对于ie8来说，稍微降级但仍然可用的行为是可以接受的。

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

Internet Explorer 8、9和10 铬 Chrome for Android

它在以下浏览器中崩溃:

火狐 Firefox for Android Internet Explorer 7

因此，我所关心的当前代码所能破解的浏览器只有Firefox(在桌面和移动端都是如此)。如果代码得到修复，可以在Firefox中正常运行，而不会破坏其他浏览器，那就可以解决我的问题。

站点HTML模板使用Internet Explorer条件注释将.ie8和.oldie等类添加到< HTML >元素。如果你需要处理IE中的样式差异，你可以在CSS中使用这些类。添加的类与旧版本的HTML5 Boilerplate相同。

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

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

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