Question

我不明白为什么caseButtonBarRow2的div宽度呈现为297.778px。它应该是300px，对吗？我认为它是我的border: 1px #FF2F2A solid;。这似乎是以1.111px的大小呈现....但为什么呢？这是容器中的几个div级别，固定宽度为310px（左/右填充为5px）。顶级div是唯一具有固定宽度的div，所以我 guess 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开发工具＆＃34; Computed Box＆＃34; 将显示呈现任何元素的大小。这意味着即使边框 1px ，它也会在＆＃34; Computed＆＃34; 面板中显示为 1.111px ，如果你＆＃ 39;以90％的比例查看页面。

我误以为＆＃34; Computed＆＃34; 面板会显示所选元素的 声明的 样式属性而不是 呈现的 样式属性。令人困惑，我想，无论如何。

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

1 个答案: