bootstrap btn-lg的行高为1.33333,为什么？

Question

引导.btn类具有以下样式:

display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;

当我使用btn-lg类来增加按钮大小时,将应用以下样式:

.btn-lg, .btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
} 

当然.btn-lg会覆盖一些.btn最显着的属性,即padding和line-height.添加填充使按钮看起来更明显.但这就是我感兴趣的:线高.为什么line-height减少到 1.33333.我对网站布局非常感兴趣,所以我问这个问题.显然你的答案可能是"这是一个设计决定".但我不认为他们随机地放了那个数字.我认为这是一些仔细的数学,所以有人可能会为我揭开这个神秘面纱的神秘面纱吗？我的意思是数学导致引导开发者添加的行高line-height: 1.33333;到btn-lg,这将是我唯一的问题.

谢谢.

Answer 1

1.33333需要5位小数的值来修复在Win 8.1上使用Chrome发生的#15497 Bootstrap问题.似乎1.33只是不够精确地代表4/3.

通过这种方式,1.33已在多个文件中进行了更改:https://github.com/twbs/bootstrap/commit/4ed95f5fa298d861c5fa53ae2a3a0dcb4901bd69

patrickhlauke解释了1.33在大多数情况下足够的原因而不是Win 8.1/Chrome的原因:

似乎罪魁祸首可能是23.94xxx的行高,导致chrome的一些舍入问题.左按钮是24px高,而右边一个只有23px由于某种原因...