报告一个IE很奇葩的滚动条问题--百分比计算宽度为浮点数时的滚动条显示异常_html/css

首頁

web前端

html教學

报告一个IE很奇葩的滚动条问题--百分比计算宽度为浮点数时的滚动条显示异常_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

起因：

　　做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理。别的浏览器都正常；但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条。如图

　　然后本人做实验找了半天原因终于是找到了，是IE浏览器使用百分比计算宽度值不是整数值引起的。

实例1：使用百分比计算结果是整数的情况下显示正常。

<!DOCTYPE html> <html> <head>   <meta charset='utf-8'>   <title>IE8奇葩滚动条问题实例</title>   <style type="text/css">     * {       -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;       box-sizing: border-box;     }     .panel{       width:1000px;     }     .scroller{       overflow-x: auto;       width:75%;       background-color: #f00;     }     .inner{       width:750px;      height: 10px;       border: 1px solid #ddd;       background-color: #ff0;     }   </style> </head> <body>   <div class="panel">     <div class="scroller" style="height:35px;">         <div class="inner"></div>     </div>   </div> </body> </html>

　　.scroller的宽度=.panel的宽度*75%；结果为750，是一个整数，和.inner的宽度相同。显示正常

实例2：使用百分比计算结果是非整数的情况下显示异常。

    .panel{       width:<strong>1001px</strong>;     }     .scroller{       overflow-x: auto;       width:75%;       background-color: #f00;     }     .inner{       width:<strong>751px</strong>;      height: 10px;       border: 1px solid #ddd;       background-color: #ff0;     }

　　设置.panel为1001px，那么.scroller的宽度=.panel的宽度*75%,结果为750.75px。但是实际上像素最小单位为1px，所以.scroller宽度为751px。而.inner也是751。按理说不应该出现横向滚动条，但是IE却出现了

　　难道IE对.scroller设置是750px?带着这个疑问，将.inner设置成750px，然后将页面放大看到.scroller和.inner的边距差距明显，所以.scroller显示的宽度是751px没有错。见下图

　　而且在IE8浏览器下测试的时候发现.scroller的高度也会影响滚动条是否显示。当.scroller的高度是34-的时候效果图如下

　　而当.scroller高度是35+的时候会显示滚动条。

　　不得不吐槽IE浏览器的奇葩。

　　在IE9+上也会出现滚动条问题，不过有改进的是和.scroller的高度无关了。

　　所以我们估计IE浏览器在判断滚动条显示与否的时候是拿计算的浮动值取比较，而非拿真实显示的值去比较的。

　　那么想象一下，对于IE浏览器来说现在.scroller的计算宽度为750.75px，如果我们给.inner也设置成一个浮点数呢？

　　测试结果是只要设置的任何浮点数都不会显示滚动条。

　　所以，注意：在我们通过计算得到父容器的宽度来设置子标签的宽度为等宽的时候，直接设置父容器的浮点值宽度即可。这是目前兼容各个浏览器的比较便捷的方法。

　　题外话：在浏览器窗口缩放（ctrl+鼠标滚轮）的时候，各个浏览器在父容器宽度是浮点数的时候都会出现滚动条，这个是缩放导致失真出现的问题，不可避免，也和该讨无关。

　　如果觉得本文不错，请点击右下方【推荐】！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。