ลบล้างและรีเซ็ตสไตล์ CSS: อัตโนมัติหรือไม่มีเลยไม่ทำงาน

ฉันต้องการลบล้างสไตล์ 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;
}

ฉันเชื่อว่าสาเหตุที่คุณสมบัติชุดแรกใช้ไม่ได้เป็นเพราะไม่มีautoค่าสำหรับdisplayคุณสมบัตินั้นจึงควรถูกละเว้น ในกรณีนั้นinline-tableจะยังคงมีผลและwidthไม่มีผลกับinlineองค์ประกอบชุดคุณสมบัตินั้นจะไม่ทำอะไรเลย

คุณสมบัติชุดที่สองจะซ่อนตารางตามที่display: noneมีไว้สำหรับ

ลองรีเซ็ตเป็นtableแทน:

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

แก้ไข: min-widthค่าเริ่มต้นเป็น0ไม่ใช่auto

"ไม่มี" ไม่ทำในสิ่งที่คุณคิด ในการ "ล้าง" คุณสมบัติ CSS คุณต้องตั้งค่ากลับเป็นค่าเริ่มต้นซึ่งกำหนดโดยมาตรฐาน CSS ดังนั้นคุณควรค้นหาค่าเริ่มต้นในข้อมูลอ้างอิงที่คุณชื่นชอบ

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

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

ลองทำตามนี้ มันจะทำงาน.

เริ่มต้นอสังหาริมทรัพย์สำหรับตารางคือdisplay ค่าเท่านั้นที่มีประโยชน์อื่นdisplay:table; ๆ ค่าinline-tableอื่น ๆ ทั้งหมดdisplayไม่ถูกต้องสำหรับองค์ประกอบตาราง

ไม่มีautoตัวเลือกในการรีเซ็ตเป็นค่าเริ่มต้นแม้ว่าคุณจะทำงานใน Javascript คุณสามารถตั้งค่าเป็นสตริงว่างซึ่งจะช่วยแก้เคล็ดลับได้

width:auto;ถูกต้อง แต่ไม่ใช่ค่าเริ่มต้น ความกว้างเริ่มต้นสำหรับตารางคือ100%ในขณะที่width:auto;จะทำให้องค์ประกอบรับความกว้างได้มากเท่าที่จำเป็นเท่านั้น

min-width:auto;ไม่อนุญาต หากคุณตั้งค่าmin-widthจะต้องมีค่า แต่การตั้งค่าเป็นศูนย์อาจดีพอ ๆ กับการรีเซ็ตเป็นค่าเริ่มต้น

ดีdisplay: none;จะไม่แสดงในตารางที่ทุกคนพยายามdisplay: inline-block;มีความกว้างและนาทีความกว้างของการประกาศที่เหลืออยู่ 'รถยนต์'

ฉันลงเอยด้วยการใช้ 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); 
    }
})

วิธีที่ดีที่สุดที่ฉันพบในการเปลี่ยนกลับการตั้งค่าความกว้างขั้นต่ำคือ:

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

unset อยู่ในข้อมูลจำเพาะ แต่บางเบราว์เซอร์ (IE 10) ไม่เคารพดังนั้น 0 จึงเป็นทางเลือกที่ดีในกรณีส่วนใหญ่ ความกว้างต่ำสุด: 0;