个人中心
gpt4 book ai didi

html -
调整大小错误；似乎有不可移除的 `min-width: min-content`

转载 作者：IT老高 更新时间：2023-10-28 11:04:40 24 4
gpt4 key购买 nike

问题

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

调整大小前:

the page before resize, showing the whole <code>select</code>

调整大小后我想要什么:

my desired page after resize, with the <code>select</code> clipping its contents

但是如果你 load this jsFiddle example 并将结果面板的宽​​度调整为小于 <select> 的宽度，可以看到<fieldset>里面的select无法缩小其宽度。

调整大小后我实际看到的内容:

my current page after resize, with a scroll bar

然而，equivalent page with a <div> instead of a <fieldset> 正确缩放。你可以看到和test your changes more easily如果您有 a <fieldset> and a <div> next to each other on one page .如果您 delete the surrounding <fieldset> tags ，调整大小有效。 <fieldset>标签以某种方式导致水平调整大小中断。
<fieldset>行为就像有一个 CSS 规则 fieldset { min-width: min-content; } . ( min-content 粗略地表示，不会导致 child 溢出的最小宽度。)如果我替换 <fieldset>与 <div> with 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>

我的 CSS 应该可以工作但没有: 

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

select {
    max-width: 100%;
}

重置 width属性到 the defaults什么也没做: 

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

进一步的 CSS，其中我 try and fail to fix the problem : 

/* 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;
}

更多细节

这个问题也出现在这个 more comprehensive, more complicated jsFiddle example ，这更类似于我实际尝试修复的网页。从中可以看出 <select>不是问题 – 内联块 div也无法调整大小。虽然这个例子更复杂，但我认为上面简单案例的修复也将修复这个更复杂的案例。

[编辑:请参阅下面的浏览器支持详细信息。]

关于这个问题的一件奇怪的事情是 if you set div.wrapper { width: 50%; } , <fieldset>此时停止调整自身大小，然后是全尺寸 <select>会撞到视口(viewport)的边缘。调整大小就像 <select>有 width: 100% ，即使 <select>看起来它有 width: 50% .

after resize with 50%-width wrapper div

如果您 give the <select> itself width: 50% ，该行为不会发生；宽度设置正确。

after resize with 50%-width select

我不明白这种差异的原因。但它可能不相关。

我也发现了非常相似的问题 HTML fieldset allows children to expand indefinitely .提问者找不到解决方案和 guesses that there is no solution除了删除 <fieldset> .但我想知道，如果真的不可能制作 <fieldset>显示正确，这是为什么？什么在 <fieldset>的 spec或 default CSS ( as of this question ) 导致这种行为？这种特殊行为可能在某处记录在案，因为多个浏览器都是这样工作的。

背景目标和要求

我尝试这样做的原因是作为为具有大表单的现有页面编写移动样式的一部分。表单有多个部分，其中一部分被包裹在 <fieldset> 中。 .在智能手机上(或者如果您使浏览器窗口变小)，带有 <fieldset> 的页面部分比表格的其余部分宽得多。大多数形式都很好地限制了其宽度，但带有 <fieldset> 的部分不会，强制用户缩小或向右滚动以查看该部分的所有内容。

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

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

编辑:浏览器支持

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

我重新测试了 my broken fieldset example在不同的浏览器上。它实际上已经在这些浏览器中工作了:
  • Internet Explorer 8、9 和 10
  • Chrome
  • 安卓版 Chrome

    • 它在这些浏览器中中断:
  • 火狐
  • 火狐安卓版
  • Internet Explorer 7

    • 因此，我关心当前代码中断的唯一浏览器是 Firefox(在桌面和移动设备上)。如果代码是固定的，因此它可以在 Firefox 中运行而不会在任何其他浏览器中破坏它，那将解决我的问题。

    站点 HTML 模板使用 Internet Explorer 条件注释添加类，例如 .ie8和 .oldie到 <html>元素。如果您需要解决 IE 中的样式差异，您可以在 CSS 中使用这些类。添加的类与 this old version of HTML5 Boilerplate 中的相同.

    最佳答案

    更新(2017 年 9 月 25 日)

    Firefox bug下面描述的内容自 Firefox 53 起已修复，此答案的链接终于是 removed from Bootstrap's documentation .

    另外，我向 Mozilla 贡献者致以诚挚的歉意，他们不得不阻止移除对 -moz-document 的支持。部分原因是这个答案。

    修复

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

    尽管如此，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 中的渲染。由于只有 Gecko 需要这个，你可以合理地使用 @-moz-document — Mozilla's proprietary CSS extensions 之一— 对其他浏览器隐藏它: 
    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

    (这是一个 jsFiddle demo 。)

    这可以解决问题，但如果你和我一样，你的 react 就像……

    What.

    有一个原因，但它并不漂亮。

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

    最重要的是，实现充满了对遗留行为的让步。其中之一是字段集的最小宽度永远不会小于其内容的固有宽度。 WebKit 为您提供了一种通过在默认样式表中指定它来覆盖此行为的方法，但 Gecko² 更进一步， enforces it in the rendering engine .

    但是，内部表元素构成一个 special frame type在壁虎。具有这些元素的尺寸约束 display设置的值在 separate code path 中计算，完全绕过了强加于字段集的强制最小宽度。

    再次—— bug for this自 Firefox 53 起已修复，因此如果您仅针对较新版本，则不需要此 hack。

    正在使用 @-moz-document安全的？

    对于这一问题，是的。 @-moz-document在 Firefox 的所有版本中都能按预期工作，直到 53，此错误已修复。

    这绝非偶然。部分由于这个答案， limit @-moz-document to user/UA stylesheets 的错误依赖于首先修复的底层字段集错误。

    除此之外， 不要使用 @-moz-document在 CSS 中定位 Firefox ，尽管有其他资源。³

    ¹ 值可以加前缀。据一位读者称，这在 Android 4.1.2 Stock Browser 和其他可能的旧版本中无效；我没有时间验证这一点。

    ² 本回答中所有 Gecko 源码的链接请引用 5065fdc12408 changeset , promise 29ᵗʰ 2013 年 7 月；您可能希望与 most recent revision from Mozilla Central 比较注释.

    ³ 参见例如 SO #953491: Targeting only Firefox with CSS和 CSS Tricks: CSS hacks targeting Firefox用于在知名网站上广泛引用的文章。

    关于html - <fieldset> 调整大小错误；似乎有不可移除的 `min-width: min-content`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17408815/

    24 4 0
    文章推荐： javascript - 获取突出显示/选定的文本
    文章推荐： mongodb - MongoDB 中的条件 $sum
    文章推荐： javascript - 重定向到 JavaScript 中的相对 URL
    文章推荐： mongodb - 用于 maxdistance 和 MongoDB 的单位？
    IT老高
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com