css - em 中的边框宽度 - 但设置最小边框宽度

Question

我希望 div 具有相对于字体大小的边框宽度，因此我设置了例如 border-width: 0.1em;。但如果字体太小，则没有边框出现，因为它被渲染得更小 0.5px。这当然不是我想要的。是否有机会设置 1px 的最小边框宽度？

div {
    border: 0.1em solid black;
}

Answer 1

在 CSS3 中，如果您的浏览器支持，您可以尝试(ab)使用 max css 函数。

border-width: max(1px, 0.1em);
border-style: solid; 
border-color: black;

不幸的是，目前还没有任何浏览器支持这个很棒的 CSS3 功能，但我希望这会很快改变!

但是在 CSS2 中——不，你不能。
但是，您可以使用 JavaScript/jQuery 遍历所有元素并将边框大小增加到 1px。

但是如果页面上的元素太多(例如，包含超过 50-100 行的表格)，这会消耗太多性能，您的浏览器会崩溃。
所以换句话说，不，这是不可能的。

$("[id$='ReportViewerControl']").find('*')

    .each(function () {

        if($(this).is('#ParametersRowReportViewerControl *')) 
            return;

        //console.log("Processing an element");
        //var cls = $(this).attr("class");

        // Don't add a border to sort-arrow
        if ($(this).is('img')) {
            return;
        }

        var anywidth = $(this).css('width');
        var anywidth = parseFloat(anywidth);
        //console.log("anywidth: " + anywidth);


        //var lol = $(this).css('borderLeftWidth');
        var blw = $(this).css('border-left-width');
        var brw = $(this).css('border-right-width');
        var btw = $(this).css('border-top-width');
        var bbw = $(this).css('border-bottom-width');

        var borls = $(this).css('border-left-style') == "solid";
        var borrs = $(this).css('border-right-style') == "solid";
        var borts = $(this).css('border-top-style') == "solid";
        var borbs = $(this).css('border-bottom-style') == "solid";

        var blw = parseFloat(blw);
        var brw = parseFloat(brw);
        var btw = parseFloat(btw);
        var bbw = parseFloat(bbw);

        //parseInt($(this).css("borderRightWidth"))
        //console.log(parseInt($(this).css("borderLeftWidth")));

        // UpdateLock = true;


        // Set width to 1px where 0px
        if (anywidth == 0)
            $(this).css('width', '1px');

        if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) {
            //console.log("setting border width");
            $(this).css('border-left-width', '1px');
        }

        if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) {
            $(this).css('border-right-width', '1px');
        }

        if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) {
            $(this).css('border-top-width', '1px');
        }

        if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) {
            $(this).css('border-bottom-width', '1px');
        }

        // UpdateLock = false;
    });           // End $('*').each