场景还原

       之前在做一个vue概况页项目的时候，遇到了此问题，div里面嵌套了一个iframe,到此问题引出了，发现多出了一个横向的滚动条，很丑不说，产品也不会同意的，因此才有本篇的出现...

解决过程

       刚开始以为是div里面的iframe出现了滚动条，通过调试（设置div背景色，调整iframe高度、宽度，目的就是区分iframe和外层的div），遗憾的是，不是iframe出现了滚动条，而是外面的div出现了滚动条，好了问题定位了就好解决了，自以为div出现了滚动条还不好解决吗?

       直接加上万能css，overflow-x:hidden，然并卵，怎么回事，以前不是一直这样的处理么？这次怎么失效了...

       尝试了许久之后无果，开始问度娘吧，然而给我有用的信息并不多，大多数还是建议用overflow-x:hidden这句style，有的让加在div上，有的索性就加在body上，然后尝试之后都并无卵用...

解决方案

       看到了这里，相信你早也就失去了耐心，直接公布结果吧，overflow-x:hidden必须要配合width一起使用才有效果，就是这么简单，当然你说我设置了width:100%了呀，怎么还是不行呢，好吧还是放弃百分比，必须固定值，比如：width:500px;

       那么问题又来了，你可能说，我的div宽度不能固定呀，要根据分辨率不同，动态变化的，好吧，我承认这是个很合理的需求，没办法，这个时候只能想办法动态计算了，该js或jQuery出场的时候了，由于每个场景都不一样，我就不公布我的解决方案了,相信到这里，你们的问题已经解决了90%了。

本文由周末简设原创出品，如需转载请注明出处
本文出处：http://www.youtiy.com/detail_458.html