邊界寬度在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; 


       //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瀏覽器呈現box-shadow，即使它小於1px，所以使用它代替邊框可能是一個好主意（克里斯蒂娜實際上是在對該問題的評論中提出的）。如果瀏覽器太薄（Firefox會這麼做），那麼某些瀏覽器不會呈現box-shadow。另外box-shadow不會添加箱子模型，因此可能需要使用額外的margin。

這是一個嘗試克服這些問題。請注意，我不得不求助於JavaScript userAgent檢測黑客（如果它是一個webkit瀏覽器，只需添加一個額外的類），因爲我無法單獨使用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>