背景
最近在開發H5，ui稿給的border：1px solid,因為ui稿上的寬度是750px，我們執行的頁面寬度是375px，所以我們需要把所以尺寸/2。所以我們可能會想寫border：0.5px solid。但是實際上，我們看頁面渲染，仍然是渲染1px而不是0.5
示例程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.flex {
display: flex;
}
.item {
margin-right: 10px;
padding: 10px;
font-size: 13px;
line-height: 1;
background-color: rgba(242, 243, 245,1);
}
.active {
color: rgba(250, 100, 0, 1);
font-size: 14px;
border: 0.5px solid ;
}
</style>
</head>
<body>
<div>
<!-- <div class="item active">
active
</div> -->
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
</div>
</body>
</html>
在沒active的情況下
他們的內容都是佔13px
在有active的情況下 
active佔了14px這個是沒問題的，因為它font-size是14px嘛，但是我們是設定了border的寬度是0.5px，但展現的卻是1px。
再來看看item
它內容佔了16px，它受到相鄰元素影響是14px+2px的上下邊框
為啥border是1px呢
在 CSS 中，邊框可以設定為 0.5px，但在某些情況下，尤其是低解析度的螢幕上，瀏覽器可能會將其渲染為 1px 或根本不顯示。這是因為某些瀏覽器和顯示裝置不支援小於 1px 的邊框寬度或不能準確渲染出這樣的細小邊框。
瀏覽器渲染機制
不同瀏覽器對於小數畫素的處理方式不同。一些瀏覽器可能會將
0.5px邊框四捨五入為1px，以確保在所有裝置上的一致性。
裝置畫素比
在高 DPI（如 Retina 顯示器）裝置上，
0.5px邊框可能看起來更清晰，因為這些裝置可以渲染更細的邊框。在低 DPI 裝置上，
0.5px邊框可能會被放大或者根本不會被顯示。
解決辦法
方法一：使用偽類和定位
.active {
color: rgba(250, 100, 0, 1);
font-size: 14px;
position: relative;
}
.active::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1px #ff892e solid;
box-sizing: border-box;
width: 100%;
height: 100%;
}
另外的item的內容高度也是14px了符合要求
方法二：使用陰影，使用F12看的時候感覺還是有些問題
.active2 {
margin-left: 10px;
color: rgba(250, 100, 0, 1);
font-size: 14px;
position: relative;
box-shadow: 0 0 0 0.5px #ff892e;
}
方法三：使用svg，但這種自己設定了寬度。
<div class="active"> <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect> </svg> active </div>
方案四：使用svg加定位，也比較麻煩，而且有其他的問題
<div class="active"> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="#ff892e" stroke-width="0.5"></rect> </svg> <div class="content">active</div> </div>
.active {
color: rgba(250, 100, 0, 1);
font-size: 14px;
position: relative;
display: inline-block;
}
.active svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
.active .content {
position: relative;
z-index: 1;
}
方法五：使用一個父元素 比較麻煩
<div class="border-container">
<div class="active">active</div>
</div>
.border-container {
display: inline-block;
padding: 0.5px;
background-color: #ff892e;
}
.active {
color: rgba(250, 100, 0, 1);
font-size: 14px;
background-color: white;
}
最後
在公司裡，我們使用的都是方案一，這樣active和item它們的內容高度都是14px了。然後我們再給他們的父盒子加上 align-items: center。這樣active的高度是14px，其他都是13px了。但是active的高度會比其他item的盒子高1px，具體看個人需求是否新增吧。
