border-width в em - но установить минимальную border-width

Question

Я хочу, чтобы div имел ширину границы относительно размера шрифта, поэтому я установил, например, border-width: 0.1em;, Но если размер шрифта слишком мал, граница не отображается, так как она уменьшается до 0,5px. Это, конечно, не то, что я хочу. Есть ли шанс установить минимальную ширину границы в 1 пиксель?

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 такие границы отображаются шириной в 1 пиксель, но в Chrome они исчезают. С другой стороны, похоже, что Chrome рендерит box-shadow даже если он меньше 1 пикселя, поэтому использование его вместо границы может быть хорошей идеей (на самом деле Кристина предложила это в комментарии к вопросу). Затем некоторые браузеры не будут отображаться box-shadow если он слишком тонкий (Firefox делает это). Дополнительно box-shadow не добавляет блочную модель, поэтому при использовании margin может быть необходимо.

Вот попытка преодоления этих проблем. Обратите внимание, что мне пришлось прибегнуть к хакерскому обнаружению userAgent в JavaScript (просто добавьте один дополнительный класс в тело, если это браузер 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>