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

資訊專欄INFORMATION COLUMN

overflow:hidden失效問(wèn)題

SHERlocked93 / 946人閱讀

摘要：要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效，而沒(méi)有想過(guò)是因?yàn)槭褂昧说挠绊?。這個(gè)屬性存在兼容性問(wèn)題。在解決問(wèn)題的過(guò)程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加。

2018-08-03 Questions about work

這幾天開(kāi)發(fā)的時(shí)候遇到了個(gè)問(wèn)題，如圖1。

寫了個(gè)demo demo 地址

由于頁(yè)面并沒(méi)有進(jìn)行整體縮放，導(dǎo)致在小屏幕手機(jī)上顯示會(huì)有異常。PM要求能夠顯示最后一個(gè)完整的標(biāo)簽。

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

搜索解決方式時(shí)一直關(guān)注的是overflow:hidden失效，而沒(méi)有想過(guò)是因?yàn)槭褂昧?b>transform的影響。

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

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

試了下，果然好了，然而。。。換個(gè)手機(jī)，換個(gè)瀏覽器就不行了。這個(gè)屬性存在兼容性問(wèn)題。

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

在解決問(wèn)題的過(guò)程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加position:relative。這也就是說(shuō)，是因?yàn)?b>overflow:hidden失效了導(dǎo)致了這樣的問(wèn)題，而與是否使用了transform沒(méi)有直接的關(guān)系（我把transform去掉，仍然有圖1的問(wèn)題，只能說(shuō)使用transform可以解決問(wèn)題）。

原因可以看這個(gè)文章 overflow:hidden失效

從這個(gè)角度進(jìn)行分析的話，因?yàn)槲覀兊?b>before偽元素使用了absolute絕對(duì)定位，且外層沒(méi)有定位，導(dǎo)致了這個(gè)before元素沒(méi)有成功被隱藏，而相應(yīng)的tag元素，由于沒(méi)有設(shè)置定位，所以正常隱藏了。

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

參考這個(gè)文章 transform對(duì)元素的影響

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

這里涉及到層疊上下文的問(wèn)題 可以參考 層疊上下文

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

補(bǔ)充

有的手機(jī)使用了transform之后仍然會(huì)出現(xiàn)上述問(wèn)題，所以，更好的解決方式應(yīng)該是設(shè)置position

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

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

相關(guān)文章

  • overflow:hidden失效問(wèn)題

    摘要：要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效，而沒(méi)有想過(guò)是因?yàn)槭褂昧说挠绊憽＿@個(gè)屬性存在兼容性問(wèn)題。在解決問(wèn)題的過(guò)程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加。 2018-08-03 Questions about work 這幾天開(kāi)發(fā)的時(shí)候遇到了個(gè)問(wèn)題，如圖1。 寫了個(gè)demo demo 地址 由于頁(yè)面并沒(méi)有進(jìn)行整體縮放，導(dǎo)致在小屏幕手機(jī)上顯示會(huì)有異常。PM要求能夠顯...

    YancyYe 評(píng)論0 收藏0

  • overflow hidden 遇上absolute失效

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

    劉明 評(píng)論0 收藏0

  • overflow hidden 遇上absolute失效

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

    lei___ 評(píng)論0 收藏0

  • 移動(dòng)端overflow失效問(wèn)題

    摘要：在項(xiàng)目開(kāi)發(fā)中，我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。問(wèn)題但是如果你的頁(yè)面是移動(dòng)端頁(yè)面的話，你會(huì)發(fā)現(xiàn)有時(shí)候會(huì)出現(xiàn)失效的問(wèn)題。出現(xiàn)這樣的問(wèn)題一般是因?yàn)槟愕脑厥窍鄬?duì)于移動(dòng)的，這樣的情況在移動(dòng)端就會(huì)出現(xiàn)問(wèn)題。 在項(xiàng)目開(kāi)發(fā)中，我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。 我們一般會(huì)有這樣的方案：先通過(guò)position: absolution或transform: trans...

    CntChen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<