CSS：为什么 1px 边框呈现为 1.111px？

Question

我不明白为什么 caseButtonBarRow2 div 宽度呈现为 297.778px。应该是300px吧？我认为这是我的border: 1px #FF2F2A solid;。这似乎以 1.111px 的大小呈现......但为什么呢？这是固定宽度为 310 像素（左/右填充为 5 像素）的容器中的几个 div 级别。顶级 div 是唯一具有固定宽度的 div，所以我猜 caseButtonBarRow2 应该拉伸到 300 像素，对吧？

HTML：

<div id="caseButtonBarRow2" class="buttonBarRow">
    <div style="position: relative;">
        <a id="MainContent_Case7CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton7_unchecked.png); background-repeat: no-repeat;"></a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton7_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 7',id:'MainContent_ctl230'" id="MainContent_Case7CheckBox" type="checkbox" name="ctl00$MainContent$Case7CheckBox" style="visibility: hidden;">

    <div style="position: relative;"><a id="MainContent_Case8CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton8_unchecked.png); background-repeat: no-repeat;">

        </a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton8_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 8',id:'MainContent_ctl232'" id="MainContent_Case8CheckBox" type="checkbox" name="ctl00$MainContent$Case8CheckBox" style="visibility: hidden;">

    <div style="position: relative;">
        <a id="MainContent_Case9CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton9_unchecked.png); background-repeat: no-repeat;">
        </a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton9_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 9',id:'MainContent_ctl234'" id="MainContent_Case9CheckBox" type="checkbox" name="ctl00$MainContent$Case9CheckBox" style="visibility: hidden;">

    <div style="position: relative;">
        <a id="MainContent_Case10CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton10_unchecked.png); background-repeat: no-repeat;">
        </a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton10_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 10',id:'MainContent_ctl236'" id="MainContent_Case10CheckBox" type="checkbox" name="ctl00$MainContent$Case10CheckBox" style="visibility: hidden;">

    <div style="position: relative;">
        <a id="MainContent_Case11CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton11_unchecked.png); background-repeat: no-repeat;">
        </a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton11_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 11',id:'MainContent_ctl238'" id="MainContent_Case11CheckBox" type="checkbox" name="ctl00$MainContent$Case11CheckBox" style="visibility: hidden;">

    <div style="position: relative;">
        <a id="MainContent_Case12CheckBox_ToggleButton" href="" title="UNSELECTED" style="position: absolute; left: 0px; top: 0px; width: 40px; height: 40px; font-size: 40px; background-image: url(https://jimasta-laptop/ExaminerGradeSheet/images/ExaminerButton12_unchecked.png); background-repeat: no-repeat;">
        </a>
    </div>
    <input data-act-togglebuttonextender="imageWidth:40,imageHeight:40,uncheckedImageUrl:'images/ExaminerButton12_unchecked.png',checkedImageUrl:'images/ExaminerButton_checked.png',uncheckedImageAlternateText:'UNSELECTED',checkedImageAlternateText:'Case 12',id:'MainContent_ctl240'" id="MainContent_Case12CheckBox" type="checkbox" name="ctl00$MainContent$Case12CheckBox" style="visibility: hidden;">
</div>

CSS：

.buttonBar > div:last-of-type {
    margin-bottom: 0;
}
.buttonBar > div {
    margin-bottom: 10px;
}
.buttonBarRow {
    overflow: hidden;
}
*, *:before, *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheetdiv {
    display: block;
}
Pseudo ::before element
    * , *:before, *:after {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
Pseudo ::after element
    * , *:before, *:after {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
Inherited from div#caseButtonBar.buttonBar
    .buttonBar {
        margin: 5px 0;
        text-align: center;
    }
Inherited from div.gradeSheetFont
    .gradeSheetFont {
        font-family: arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #FF2F2A;
    }
Inherited from body
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.428571429;
        color: #333333;
        background-color: #ffffff;
    }
Inherited from html.js.flexbox.flexboxlegacy.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
    html {
        font-size: 62.5%;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
html {
    font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
}

Answer 1

抱歉，更新这个问题花了这么长时间。谢谢@SalmanA！你是对的。我（无意中）以 90% 的速度查看该页面。

注意：Chrome 开发工具“Computed Box” 将显示渲染的 任何元素的大小。这意味着即使边框是 1px，如果您正在查看页面，它会在 "Computed" 面板中显示为90%。

我错误地认为 "Computed" 面板会显示所选元素的 declared 样式属性，而不是 >渲染 样式属性。令人困惑，我想，但无论如何。