覆盖和重置 CSS 样式：自动或无不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5091357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override and reset CSS style: auto or none don't work
提问by sergionni
I would like to override following CSS styling defined for all tables:
我想覆盖为所有表定义的以下 CSS 样式：
table {
font-size: 12px;
width: 100%;
min-width: 400px;
display:inline-table;
}
I have specific table with class called 'other'.
Finally table decoration should looks like:
我有一个名为'other'.
最后表装饰应该是这样的：
table.other {
font-size: 12px;
}
so i need remove 3 properties: width,min-widthand display
所以我需要删除 3 个属性：width，min-width和display
I tried to reset with noneor auto, but didn't help, I mean these cases:
我试图用none或重置auto，但没有帮助，我的意思是这些情况：
table.other {
width: auto;
min-width: auto;
display:auto;
}
table.other {
width: none;
min-width: none;
display:none;
}
回答by Yi Jiang
I believe the reason why the first set of properties will not work is because there is no autovalue for display, so that property should be ignored. In that case, inline-tablewill still take effect, and as widthdo not apply to inlineelements, that set of properties will not do anything.
我相信第一组属性不起作用的原因是因为没有auto值display，所以应该忽略该属性。在这种情况下，inline-table仍然会生效，并且由于width不适用于inline元素，因此该组属性不会做任何事情。
The second set of properties will simply hide the table, as that's what display: noneis for.
第二组属性将简单地隐藏表格，因为这就是display: none它的用途。
Try resetting it to tableinstead:
尝试将其重置为table：
table.other {
width: auto;
min-width: 0;
display: table;
}
Edit:min-widthdefaults to 0, not auto
编辑：min-width默认为0，不auto
回答by tenfour
"none" does not do what you assume it does. In order to "clear" a CSS property, you must set it back to its default, which is defined by the CSS standard. Thus you should look up the defaults in your favorite reference.
“无”不会做你认为它会做的事情。为了“清除”CSS 属性，您必须将其设置回其默认值，这是由 CSS 标准定义的。因此，您应该在您最喜欢的参考中查找默认值。
table.other {
width: auto;
min-width: 0;
display:table;
}
回答by Martin
Set min-width: inherit /* Reset the min-width */
Try this. It will work.
尝试这个。它会起作用。
回答by Spudley
The default displayproperty for a table is display:table;. The only other useful value is inline-table. All other displayvalues are invalid for table elements.
display表的默认属性是display:table;。唯一的其他有用值是inline-table。所有其他display值对表元素无效。
There isn't an autooption to reset it to default, although if you're working in Javascript, you can set it to an empty string, which will do the trick.
没有将auto其重置为默认值的选项，但如果您使用的是 Javascript，则可以将其设置为空字符串，这样就可以了。
width:auto;is valid, but isn't the default. The default width for a table is 100%, whereas width:auto;will make the element only take up as much width as it needs to.
width:auto;有效，但不是默认值。表格的默认宽度是100%，而width:auto;会使元素只占用它需要的宽度。
min-width:auto;isn't allowed. If you set min-width, it must have a value, but setting it to zero is probably as good as resetting it to default.
min-width:auto;不允许。如果您设置min-width，它必须有一个值，但将其设置为零可能与将其重置为默认值一样好。
回答by Steven
Well, display: none;will not display the table at all, try display: inline-block;with the width and min-width declarations remaining 'auto'.
好吧，display: none;根本不会显示表格，尝试display: inline-block;将宽度和最小宽度声明保留为“自动”。
回答by User
I ended up using Javascript to perfect everything.
我最终使用 Javascript 来完善一切。
My JS fiddle: https://jsfiddle.net/QEpJH/612/
我的 JS 小提琴：https: //jsfiddle.net/QEpJH/612/
HTML:
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:
CSS：
.container {
background-color:#000;
width:100px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
JS:
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);
}
})
回答by A Morales
The best way that I've found to revert a min-width setting is:
我发现恢复最小宽度设置的最佳方法是：
min-width: 0;
min-width: unset;
unset is in the spec, but some browsers (IE 10) do not respect it, so 0 is a good fallback in mostcases. min-width: 0;
unset 在规范中，但一些浏览器（IE 10）不尊重它，所以在大多数情况下0 是一个很好的后备。最小宽度：0；
