overflow:hidden失效問題

SHERlocked93 發布于2019-08-29 16:37 / 927人閱讀

摘要：要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效，而沒有想過是因為使用了的影響。這個屬性存在兼容性問題。在解決問題的過程中，發現了另一種解決辦法，在父元素上添加。

2018-08-03 Questions about work

這幾天開發的時候遇到了個問題，如圖1。

寫了個demo demo 地址

由于頁面并沒有進行整體縮放，導致在小屏幕手機上顯示會有異常。PM要求能夠顯示最后一個完整的標簽。

當在iPhone5手機上查看頁面的時候，由于設置了height以及overflow:hidden后面的標簽被隱藏了。但是邊框是用before偽元素實現的，并沒有因為overflow:hidden 而一起隱藏（后面再探討這種邊框的不同實現方式）。

搜索解決方式時一直關注的是overflow:hidden失效，而沒有想過是因為使用了transform的影響。

網上搜到了一種解決方式：

在父元素上添加：transform-style:preserve-3d

試了下，果然好了，然而。。。換個手機，換個瀏覽器就不行了。這個屬性存在兼容性問題。

那既然跟transform有關，試一下transform:translateZ(0)，發現問題解決了，試了多個手機和瀏覽器，沒有兼容性的問題。

在解決問題的過程中，發現了另一種解決辦法，在父元素上添加position:relative。這也就是說，是因為overflow:hidden失效了導致了這樣的問題，而與是否使用了transform沒有直接的關系（我把transform去掉，仍然有圖1的問題，只能說使用transform可以解決問題）。

原因可以看這個文章 overflow:hidden失效

從這個角度進行分析的話，因為我們的before偽元素使用了absolute絕對定位，且外層沒有定位，導致了這個before元素沒有成功被隱藏，而相應的tag元素，由于沒有設置定位，所以正常隱藏了。

那為什么使用了transform:translateZ(0)之后，問題也能夠解決呢？

參考這個文章 transform對元素的影響

absolute絕對定位元素，如果含有overflow不為visible的父級元素，同時，該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position為非static屬性的聲明，則overflow對該absolute元素不起作用。

這里涉及到層疊上下文的問題可以參考層疊上下文

當使用transform:translateZ(0)時，生成了新的層，覆蓋在了上面。

補充

有的手機使用了transform之后仍然會出現上述問題，所以，更好的解決方式應該是設置position

云服務器 GPU云服務器啟動失效失效首頁失效屬性失效

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113867.html

overflow:hidden失效問題

摘要：要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效，而沒有想過是因為使用了的影響。這個屬性存在兼容性問題。在解決問題的過程中，發現了另一種解決辦法，在父元素上添加。 2018-08-03 Questions about work 這幾天開發的時候遇到了個問題，如圖1。寫了個demo demo 地址由于頁面并沒有進行整體縮放，導致在小屏幕手機上顯示會有異常。PM要求能夠顯...

YancyYe 2019-08-02 16:03 評論0 收藏0
overflow hidden 遇上absolute失效

摘要：寫了個由于頁面并沒有進行整體縮放，導致在小屏幕手機上顯示會有異常。要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效，而沒有想過是因為使用了的影響。在解決問題的過程中，發現了另一種解決辦法，在父元素上添加。原文地址背景這幾天開發的時候遇到了個問題，如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...

劉明 2019-08-29 16:18 評論0 收藏0
overflow hidden 遇上absolute失效

摘要：寫了個由于頁面并沒有進行整體縮放，導致在小屏幕手機上顯示會有異常。要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效，而沒有想過是因為使用了的影響。在解決問題的過程中，發現了另一種解決辦法，在父元素上添加。原文地址背景這幾天開發的時候遇到了個問題，如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...

lei___ 2019-08-02 11:10 評論0 收藏0
移動端overflow失效問題

摘要：在項目開發中，我們有時候需要實現元素從屏幕外移動到屏幕內的效果。問題但是如果你的頁面是移動端頁面的話，你會發現有時候會出現失效的問題。出現這樣的問題一般是因為你的元素是相對于移動的，這樣的情況在移動端就會出現問題。在項目開發中，我們有時候需要實現元素從屏幕外移動到屏幕內的效果。我們一般會有這樣的方案：先通過position: absolution或transform: trans...

CntChen 2019-08-01 18:19 評論0 收藏0