成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

overflow hidden 遇上absolute失效

lei___ / 2616人閱讀

摘要：寫了個由于頁面并沒有進行整體縮放，導(dǎo)致在小屏幕手機上顯示會有異常。要求能夠顯示最后一個完整的標簽。搜索解決方式時一直關(guān)注的是失效，而沒有想過是因為使用了的影響。在解決問題的過程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加。

原文地址

背景

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

寫了個demo

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

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

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

解決

網(wǎng)上搜到了一種解決方式：

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

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

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

在解決問題的過程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加position:relative。

這也就是說，是因為overflow:hidden失效了導(dǎo)致了這樣的問題，而與是否使用了transform沒有直接的關(guān)系（我把transform去掉，仍然有圖1的問題，所以與transform并無必然聯(lián)系，只能說使用transform可以解決問題）。

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52816.html

相關(guān)文章

  • overflow hidden 遇上absolute失效

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

    劉明 評論0 收藏0

  • overflow:hidden失效問題

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

    YancyYe 評論0 收藏0

  • overflow:hidden失效問題

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

    SHERlocked93 評論0 收藏0

  • 可視化效果(Visual effects)

    摘要：一般地，一個塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會根據(jù)其祖先的屬性裁剪。默認情況下，元素不會被裁剪。在閉合路徑內(nèi)的內(nèi)容會顯示，而路徑外邊的都會被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個盒可能會溢出，意味著它的部分內(nèi)容或者全部內(nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...

    JowayYoung 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<