CSS:为什么1px边框渲染为1.111px？

Question

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

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开发工具 "计算框"将显示任何元素的渲染大小.这意味着即使边框是 1px,如果您以90%的速度查看页面,它将在 "计算"面板中显示为 1.111px.

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