CSS：为啥 1px 边框呈现为 1.111px？

Posted 2023-03-06

【中文标题】CSS：为啥 1px 边框呈现为 1.111px？

【英文标题】：CSS: Why does a 1px border render as 1.111px?CSS：为什么 1px 边框呈现为 1.111px？

【发布时间】：2015-01-29 20:21:58

【问题描述】：

我不明白为什么 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.cs-s-reflections.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%;

【问题讨论】：

如果还有更多，你能发布所有包含的 div 吗？看不到 buttonBarRow2 类实际包含什么

您是否将页面缩放到 90%？按 CTRL+0 并再次检查。

显示您的 实际 HTML 和 CSS 代码。解释是什么让你认为 1px 被实现为某种东西。如果您包含来自浏览器开发工具的内容，请将它们与您自己的代码分开，并确定您从哪里复制它们。

...0.111px 是什么样子的？

【参考方案1】：

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

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

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