摘要:要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效,而沒有想過是因?yàn)槭褂昧说挠绊憽_@個(gè)屬性存在兼容性問題。在解決問題的過程中,發(fā)現(xiàn)了另一種解決辦法,在父元素上添加。
2018-08-03 Questions about work
這幾天開發(fā)的時(shí)候遇到了個(gè)問題,如圖1。
寫了個(gè)demo demo 地址
由于頁面并沒有進(jìn)行整體縮放,導(dǎo)致在小屏幕手機(jī)上顯示會有異常。PM要求能夠顯示最后一個(gè)完整的標(biāo)簽。
當(dāng)在iPhone5手機(jī)上查看頁面的時(shí)候,由于設(shè)置了height以及overflow:hidden后面的標(biāo)簽被隱藏了。但是邊框是用before偽元素實(shí)現(xiàn)的,并沒有因?yàn)?b>overflow:hidden 而一起隱藏(后面再探討這種邊框的不同實(shí)現(xiàn)方式)。
搜索解決方式時(shí)一直關(guān)注的是overflow:hidden失效,而沒有想過是因?yàn)槭褂昧?b>transform的影響。
網(wǎng)上搜到了一種解決方式:
在父元素上添加:transform-style:preserve-3d
試了下,果然好了,然而。。。換個(gè)手機(jī),換個(gè)瀏覽器就不行了。這個(gè)屬性存在兼容性問題。
那既然跟transform有關(guān),試一下transform:translateZ(0),發(fā)現(xiàn)問題解決了,試了多個(gè)手機(jī)和瀏覽器,沒有兼容性的問題。
在解決問題的過程中,發(fā)現(xiàn)了另一種解決辦法,在父元素上添加position:relative。這也就是說,是因?yàn)?b>overflow:hidden失效了導(dǎo)致了這樣的問題,而與是否使用了transform沒有直接的關(guān)系(我把transform去掉,仍然有圖1的問題,只能說使用transform可以解決問題)。
原因可以看這個(gè)文章 overflow:hidden失效
從這個(gè)角度進(jìn)行分析的話,因?yàn)槲覀兊?b>before偽元素使用了absolute絕對定位,且外層沒有定位,導(dǎo)致了這個(gè)before元素沒有成功被隱藏,而相應(yīng)的tag元素,由于沒有設(shè)置定位,所以正常隱藏了。
那為什么使用了transform:translateZ(0)之后,問題也能夠解決呢?
參考這個(gè)文章 transform對元素的影響
absolute絕對定位元素,如果含有overflow不為visible的父級元素,同時(shí),該父級元素以及到該絕對定位元素之間任何嵌套元素都沒有position為非static屬性的聲明,則overflow對該absolute元素不起作用。
這里涉及到層疊上下文的問題 可以參考 層疊上下文
當(dāng)使用transform:translateZ(0)時(shí),生成了新的層,覆蓋在了上面。
補(bǔ)充有的手機(jī)使用了transform之后仍然會出現(xiàn)上述問題,所以,更好的解決方式應(yīng)該是設(shè)置position
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/54576.html
摘要:要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效,而沒有想過是因?yàn)槭褂昧说挠绊憽_@個(gè)屬性存在兼容性問題。在解決問題的過程中,發(fā)現(xiàn)了另一種解決辦法,在父元素上添加。 2018-08-03 Questions about work 這幾天開發(fā)的時(shí)候遇到了個(gè)問題,如圖1。 寫了個(gè)demo demo 地址 由于頁面并沒有進(jìn)行整體縮放,導(dǎo)致在小屏幕手機(jī)上顯示會有異常。PM要求能夠顯...
摘要:寫了個(gè)由于頁面并沒有進(jìn)行整體縮放,導(dǎo)致在小屏幕手機(jī)上顯示會有異常。要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效,而沒有想過是因?yàn)槭褂昧说挠绊憽T诮鉀Q問題的過程中,發(fā)現(xiàn)了另一種解決辦法,在父元素上添加。 原文地址 背景 這幾天開發(fā)的時(shí)候遇到了個(gè)問題,如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要:寫了個(gè)由于頁面并沒有進(jìn)行整體縮放,導(dǎo)致在小屏幕手機(jī)上顯示會有異常。要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效,而沒有想過是因?yàn)槭褂昧说挠绊憽T诮鉀Q問題的過程中,發(fā)現(xiàn)了另一種解決辦法,在父元素上添加。 原文地址 背景 這幾天開發(fā)的時(shí)候遇到了個(gè)問題,如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要:在項(xiàng)目開發(fā)中,我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。問題但是如果你的頁面是移動(dòng)端頁面的話,你會發(fā)現(xiàn)有時(shí)候會出現(xiàn)失效的問題。出現(xiàn)這樣的問題一般是因?yàn)槟愕脑厥窍鄬τ谝苿?dòng)的,這樣的情況在移動(dòng)端就會出現(xiàn)問題。 在項(xiàng)目開發(fā)中,我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。 我們一般會有這樣的方案:先通過position: absolution或transform: trans...
閱讀 1123·2021-11-08 13:13
閱讀 1707·2019-08-30 15:55
閱讀 2762·2019-08-29 11:26
閱讀 2427·2019-08-26 13:56
閱讀 2549·2019-08-26 12:15
閱讀 2125·2019-08-26 11:41
閱讀 1394·2019-08-26 11:00
閱讀 1530·2019-08-23 18:30