摘要:寫了個由于頁面并沒有進行整體縮放,導致在小屏幕手機上顯示會有異常。要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效,而沒有想過是因為使用了的影響。在解決問題的過程中,發現了另一種解決辦法,在父元素上添加。
原文地址
背景這幾天開發的時候遇到了個問題,如圖1。
寫了個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并無必然聯系,只能說使用transform可以解決問題)。
原因可以看這個文章 overflow:hidden失效
從這個角度進行分析的話,因為我們的before偽元素使用了absolute絕對定位,且外層沒有定位,導致了這個before元素沒有成功被隱藏,而相應的tag元素,由于沒有設置定位,所以正常隱藏了。
那為什么使用了transform:translateZ(0)之后,問題也能夠解決呢?
參考這個文章 transform對元素的影響
absolute絕對定位元素,如果含有overflow不為visible的父級元素,同時,該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position為非static屬性的聲明,則overflow對該absolute元素不起作用。
這里涉及到層疊上下文的問題 可以參考 層疊上下文
當使用transform:translateZ(0)時,生成了新的層,覆蓋在了上面。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52816.html
摘要:寫了個由于頁面并沒有進行整體縮放,導致在小屏幕手機上顯示會有異常。要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效,而沒有想過是因為使用了的影響。在解決問題的過程中,發現了另一種解決辦法,在父元素上添加。 原文地址 背景 這幾天開發的時候遇到了個問題,如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要:要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效,而沒有想過是因為使用了的影響。這個屬性存在兼容性問題。在解決問題的過程中,發現了另一種解決辦法,在父元素上添加。 2018-08-03 Questions about work 這幾天開發的時候遇到了個問題,如圖1。 寫了個demo demo 地址 由于頁面并沒有進行整體縮放,導致在小屏幕手機上顯示會有異常。PM要求能夠顯...
摘要:要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關注的是失效,而沒有想過是因為使用了的影響。這個屬性存在兼容性問題。在解決問題的過程中,發現了另一種解決辦法,在父元素上添加。 2018-08-03 Questions about work 這幾天開發的時候遇到了個問題,如圖1。 寫了個demo demo 地址 由于頁面并沒有進行整體縮放,導致在小屏幕手機上顯示會有異常。PM要求能夠顯...
摘要:一般地,一個塊盒的內容都被限制在該盒的邊內。這種盒并不一定會根據其祖先的屬性裁剪。默認情況下,元素不會被裁剪。在閉合路徑內的內容會顯示,而路徑外邊的都會被剪掉著作權歸作者所有。 Overflow and clipping 一般地,一個塊盒的內容都被限制在該盒的content邊內。某些情況下,一個盒可能會溢出,意味著它的部分內容或者全部內容位于該盒外部,例如: 一行無法拆分,導致行盒比...
閱讀 3699·2021-11-11 16:55
閱讀 1646·2021-10-08 10:04
閱讀 3581·2021-09-27 13:36
閱讀 2761·2019-08-30 15:53
閱讀 1855·2019-08-30 11:17
閱讀 1259·2019-08-29 16:55
閱讀 2098·2019-08-29 13:57
閱讀 2513·2019-08-29 13:13