以 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

Answer 2

看起来不同的浏览器处理比 1px 细的边框不同。在Firefox中，这样的边框似乎呈现为1px宽，但在Chrome中它们消失了。另一方面，Chrome 似乎即使小于 1px 也能呈现box-shadow，因此使用它而不是边框可能是一个好主意（克里斯蒂娜实际上是在问题的评论中建议的）。同样，如果浏览器太薄，某些浏览器将无法呈现box-shadow（Firefox 就是这样做的）。此外，box-shadow 不会添加盒模型，因此可能需要使用额外的margin。

这是克服这些问题的尝试。请注意，我不得不求助于 JavaScript userAgent 检测黑客（如果是 webkit 浏览器，只需向 body 添加一个额外的类），因为我无法单独使用 CSS 来实现它。

if (navigator.userAgent.toLowerCase().indexOf("webkit") > -1)
{
    document.body.className += " webkitHack";
}

/* Borders */
.border{
  border:0.0625em solid black;
}
.shadowyBorder{
  box-shadow: 0 0 0 0.0625em black;
  /* Compensating for the fact that box-shadow doesn't count towards box model */
  margin: 0.0625em;
}
.comboBorder
{
  /* If it's not webkit use border */
  border:0.0625em solid black;
}
/* If it's webkit use box-shadow */
.webkitHack .comboBorder
{
  border: none;
  box-shadow: 0 0 0 0.0625em black;
  /* Compensating for the fact that box-shadow doesn't count towards box model */
  margin: 0.0625em;
}
/* Extras */
td, th
{
  padding:5px;
}
.em05
{
  font-size:8px;
}
.em1
{
  font-size:16px;
}
.em2
{
  font-size:32px;
}
.box
{
  display:inline-block;
  height:1em;
  width:1em;
}

<table>
  <tr>
    <th>Font size</th><th>Border</th><th>Box shadow</th><th>Box shadow in webkit</th>
  </tr>
  <tr>
    <td>
      8px
    </td>
    <td class="em05">
      <div class="box border"></div>
    </td>
    <td class="em05">
      <div class="box shadowyBorder"></div>
    </td>
    <td class="em05">
      <div class="box comboBorder"></div>
    </td>
  </tr>
  <tr>
    <td>
      16px
    </td>
    <td class="em1">
      <div class="box border"></div>
    </td>
    <td class="em1">
      <div class="box shadowyBorder"></div>
    </td>
    <td class="em1">
      <div class="box comboBorder"></div>
    </td>
  </tr>
  <tr>
    <td>
      32px
    </td>
    <td class="em2">
      <div class="box border"></div>
    </td>
    <td class="em2">
      <div class="box shadowyBorder"></div>
    </td>
    <td class="em2">
      <div class="box comboBorder"></div>
    </td>
  </tr>
</table>