覆盖和重置 CSS 样式：auto 或 none 不起作用

Posted 2023-03-06

【中文标题】覆盖和重置 CSS 样式：auto 或 none 不起作用

【英文标题】：Override and reset CSS style: auto or none don't work

【发布时间】：2011-07-02 18:12:09

【问题描述】：

我想覆盖为所有表格定义的以下 CSS 样式：

table 
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    

我有一个名为'other'的类的特定表。 最后餐桌装饰应该是这样的：

table.other 
    font-size: 12px;

所以我需要删除 3 个属性：width、min-width 和 display

我尝试使用none 或auto 进行重置，但没有帮助，我的意思是这些情况：

table.other 
    width: auto;
    min-width: auto;
    display:auto;

table.other 
    width: none;
    min-width: none;
    display:none;

【参考方案1】：

我认为第一组属性不起作用的原因是因为display 没有auto 值，所以应该忽略该属性。在这种情况下，inline-table 仍然会生效，并且由于width 不适用于inline 元素，因此该组属性不会做任何事情。

第二组属性将简单地隐藏表格，因为这就是 display: none 的用途。

尝试将其重置为table：

table.other 
    width: auto;
    min-width: 0;
    display: table;

编辑： min-width 默认为 0，而不是 auto

【讨论】：

奇怪，我正在使用 firebug - min-width 没有被 auto 覆盖

@sergionni 哦，是的，我忘记了 - min-width 的默认值为 0 - reference.sitepoint.com/css/min-width

我又看了一遍firebug，也有问题，有嵌套表，所以覆盖应该应用于所有层次结构

@sergionni 您可以通过将table.other table 添加到用于重置属性的选择器来实现

width: auto 当我只想覆盖 width: 100% -- 谢谢

【参考方案2】：

"none" 不会像你认为的那样做。为了“清除”一个 CSS 属性，您必须将其设置回其默认值，该默认值由 CSS 标准定义。因此，您应该在您最喜欢的参考资料中查找默认值。

table.other 
    width: auto;
    min-width: 0;
    display:table;

【参考方案3】：

Set min-width: inherit /* Reset the min-width */

试试这个。它会起作用的。

【讨论】：

这应该是一个可以接受的答案。 min-width: 0 不做同样的事情

对，但是如果父母有一个min-width 怎么办？你会得到它而不是真正的默认值。

【参考方案4】：

表的默认display 属性是display:table;。唯一有用的值是inline-table。所有其他 display 值对于表格元素均无效。

没有auto 选项可以将其重置为默认值，但如果您使用 javascript，则可以将其设置为空字符串，这样就可以解决问题。

width:auto; 有效，但不是默认值。表格的默认宽度是100%，而width:auto; 将使元素只占用它需要的宽度。

min-width:auto; 是不允许的。如果您设置min-width，它必须有一个值，但将其设置为零可能与将其重置为默认值一样好。

【讨论】：

关于 JS 的有趣想法。看起来像我需要的。我会先尝试使用 CSS。

【参考方案5】：

好吧，display: none; 根本不会显示表格，请尝试 display: inline-block; 将宽度和最小宽度声明保持为“自动”。

【参考方案6】：

我发现恢复最小宽度设置的最佳方法是：

min-width: 0;
min-width: unset;

unset 在规范中，但一些浏览器（IE 10）不尊重它，所以 0 在大多数 情况下是一个很好的后备。 最小宽度：0；

【参考方案7】：

我最终使用 Javascript 来完善一切。

我的 JS 小提琴：https://jsfiddle.net/QEpJH/612/

html：

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

CSS：

.container 
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

JS：

$(".container").each(function()
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH))  
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
     else 
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    
)

【参考方案8】：

我试过了：

width:0%

为我工作