資訊專欄INFORMATION COLUMN
摘要：寫了個(gè)由于頁面并沒有進(jìn)行整體縮放，導(dǎo)致在小屏幕手機(jī)上顯示會(huì)有異常。要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效，而沒有想過是因?yàn)槭褂昧说挠绊憽Ｔ诮鉀Q問題的過程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加。
原文地址
背景這幾天開發(fā)的時(shí)候遇到了個(gè)問題，如圖1。
寫了個(gè)demo
由于頁面并沒有進(jìn)行整體縮放，導(dǎo)致在小屏幕手機(jī)上顯示會(huì)有異常。PM要求能夠顯示最后一個(gè)完整的標(biāo)簽。
當(dāng)在iPhone5手機(jī)上查看頁面的時(shí)候，由于設(shè)置了height以及overflow:hidden后面的標(biāo)簽被隱藏了。但是邊框是用before偽元素實(shí)現(xiàn)的，并沒有因?yàn)閛verflow:hidden 而一起隱藏（后面再探討這種邊框的不同實(shí)現(xiàn)方式）。
搜索解決方式時(shí)一直關(guān)注的是overflow:hidden失效，而沒有想過是因?yàn)槭褂昧藅ransform的影響。
解決網(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)閛verflow:hidden失效了導(dǎo)致了這樣的問題，而與是否使用了transform沒有直接的關(guān)系（我把transform去掉，仍然有圖1的問題，所以與transform并無必然聯(lián)系，只能說使用transform可以解決問題）。
原因可以看這個(gè)文章 overflow:hidden失效
從這個(gè)角度進(jìn)行分析的話，因?yàn)槲覀兊腷efore偽元素使用了absolute絕對(duì)定位，且外層沒有定位，導(dǎo)致了這個(gè)before元素沒有成功被隱藏，而相應(yīng)的tag元素，由于沒有設(shè)置定位，所以正常隱藏了。
那為什么使用了transform:translateZ(0)之后，問題也能夠解決呢？
參考這個(gè)文章 transform對(duì)元素的影響
absolute絕對(duì)定位元素，如果含有overflow不為visible的父級(jí)元素，同時(shí)，該父級(jí)元素以及到該絕對(duì)定位元素之間任何嵌套元素都沒有position為非static屬性的聲明，則overflow對(duì)該absolute元素不起作用。
這里涉及到層疊上下文的問題 可以參考 層疊上下文
當(dāng)使用transform:translateZ(0)時(shí)，生成了新的層，覆蓋在了上面。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113661.html
摘要：寫了個(gè)由于頁面并沒有進(jìn)行整體縮放，導(dǎo)致在小屏幕手機(jī)上顯示會(huì)有異常。要求能夠顯示最后一個(gè)完整的標(biāo)簽。搜索解決方式時(shí)一直關(guān)注的是失效，而沒有想過是因?yàn)槭褂昧说挠绊憽Ｔ诮鉀Q問題的過程中，發(fā)現(xiàn)了另一種解決辦法，在父元素上添加。 原文地址 背景 這幾天開發(fā)的時(shí)候遇到了個(gè)問題，如圖1。showImg(https://segmentfault.com/img/remote/1460000015922...
摘要：要求能夠顯示最后一個(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ī)上顯示會(huì)有異常。PM要求能夠顯...
摘要：要求能夠顯示最后一個(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ī)上顯示會(huì)有異常。PM要求能夠顯...
摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部?jī)?nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...
閱讀 2335·2021-11-24 09:39
閱讀 3778·2021-11-19 09:40
閱讀 2153·2021-09-27 13:36
閱讀 1896·2019-08-30 15:44
閱讀 390·2019-08-30 13:52
閱讀 2712·2019-08-30 11:13
閱讀 2171·2019-08-29 16:18
閱讀 1755·2019-08-29 15:43
