當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端页面布局常见问题/已踩过的坑大杂烩

發(fā)布時(shí)間：2025/3/16 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了前端页面布局常见问题/已踩过的坑大杂烩小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、IE8下[圖片加文字]展示時(shí)自動(dòng)換行的問題
二、設(shè)置了z-index無效
三、當(dāng)文字超出范圍時(shí)自動(dòng)補(bǔ)...省略號
四、實(shí)現(xiàn)垂直居中
五、實(shí)現(xiàn)無縫十字邊框
六、Iphone APP Webview中 A標(biāo)簽失效問題
七、Iphone/Android APP Webview中 H5頁面與APP如何進(jìn)行數(shù)據(jù)交互
八、如何能讓H5頁面適應(yīng)所有分辨率的手機(jī)
九、IOS iphone/ipad safari 微信瀏覽器在input focus彈出輸入法時(shí) position:fixed失效問題
十、如何用CSS修改HTML5 input/textarea的 placeholder的文字顏色
十一、ios中input被默認(rèn)加上了圓角問題
十二、marquee標(biāo)簽無js實(shí)現(xiàn)各種文字滾動(dòng)代碼(適用公告)
十三、修改滾動(dòng)條樣式
十四、REM部局時(shí)，元素設(shè)的height與line-height在安卓瀏覽器中出現(xiàn)偏差問題
十五、在APP中，解決webview中h5樣式或者js緩存問題
十六、新版的安卓版微信內(nèi)置瀏覽器在鍵盤彈出時(shí)不會(huì)觸發(fā)resize動(dòng)作，導(dǎo)致遮擋住輸入框問題?
十七、移動(dòng)端近似解決1像素邊框問題
十八、用rem設(shè)備圖片背景時(shí)會(huì)出現(xiàn)圖片邊邊被截情況
十九、小米4c系列，對input類型的按鈕點(diǎn)擊不了/點(diǎn)擊沒響應(yīng)的問題
二十、CSS3水平陰影、豎直陰影
二十一、華為手機(jī)虛擬鍵盤擠壓屏幕高度
二十二、微信長按識別二維碼只針對img有效，圖片背景無效，而且同屏有兩二維碼時(shí)，只能識別第一個(gè)
二十三、Flex流式部局
二十四、進(jìn)度條
二十五、CSS3文字描邊
二十六、去掉ios默認(rèn)給input加上的圓角
二十七、CSS3背景色漸變
二十八、CSS3內(nèi)發(fā)光、外發(fā)光
二十九、IOS Webview中的h5頁面上除A標(biāo)簽外的其他dom元素要做成可點(diǎn)擊必需加上cursor: pointer樣式
三十、魅族 Webview中的h5頁面獲取到的屏幕寬度不準(zhǔn)的問題
三十一、華為自帶瀏覽器不支持流式布局
三十二、transition動(dòng)畫中用left制作動(dòng)畫可能會(huì)出現(xiàn)卡卡的不流暢
三十三、像素pixel轉(zhuǎn)rem和Rem轉(zhuǎn)像素pixel
三十四、CSS3 :nth-child(n) 選擇器和:nth-of-type() 選擇器
三十五、IOS webview高度不準(zhǔn)確把h5底部截掉/IOS APP webview中的h5頁面中的fixed在底部的dom元素顯示不全或者被截掉不顯示問題。
三十六、兼容微信音頻播放。
三十七、相鄰帶背景圖的兩個(gè)元素，用負(fù)數(shù)margin會(huì)出現(xiàn)背景疊加。
三十八、background-size設(shè)為100% auto時(shí)repeat背景在部分華為手機(jī)沒效問題。
三十九、彈框里的滾動(dòng)條滾動(dòng)時(shí)，外部body也跟著滾動(dòng)的問題。
四十、Rem單位設(shè)置的小圓圈在安卓手機(jī)上不圓的問題。
四十一、在ios的webview中使用fixed在頂部的內(nèi)容導(dǎo)致下拉刷新被阻擋問題
四十二、web中彈出彈框后，要求滾動(dòng)彈框內(nèi)容時(shí)，背景元素不能滾動(dòng)，關(guān)閉彈框后要求背景元素位置保持不變解決方案
四十三、overflow:auto及overflow:scroll的區(qū)別
四十四、H5,CSS3,js動(dòng)畫FPS(幀頻)要達(dá)到60才不會(huì)感覺到卡
四十五、如何使用HSL(H,S,L)來設(shè)置顏色？
四十六、pointer-events，一個(gè)神奇的css屬性
四十七、CSS3屬性-webkit-font-smoothing字體抗鋸齒渲染
四十八、white-space 屬性設(shè)置按內(nèi)容的空白及換行原樣顯示
四十九、數(shù)字badge由圓圈到圓角橢圓自動(dòng)伸長技巧
五十、移動(dòng)端h5頁面必須重置的樣式及meta設(shè)置
五十一、指定SVG元素path的渲染模式:shape-rendering
五十二、解決ios下的微信打開的頁面背景音樂無法自動(dòng)播放
五十三、iphoneX安全區(qū)域問題
五十四、flex-wrap: wrap相對較舊版本手機(jī)自帶瀏覽器不換行問題如何解決？
五十五、段落縮進(jìn)及字間間距樣式:text-indent及l(fā)etter-space
五十六、flex布局子元素在低版本安卓機(jī)上justify-content:space-between失效問題
五十七、如何解決移動(dòng)端hover的問題？
五十八、寫向上滾動(dòng)動(dòng)畫時(shí)使用偽元素用作漸變透明遮罩圖層時(shí)會(huì)出現(xiàn)底邊閃爍問題
五十九、給tbody設(shè)置transform屬性導(dǎo)致thead的z-index 無效問題?
六十、web font-size選擇，web設(shè)計(jì)稿寬度通用選擇
六十一、iPhoneX適配問題

一、IE8下[圖片加文字]展示時(shí)自動(dòng)換行的問題

問題如下圖所示：

Html代碼如下：

CSS樣式

.flag {position: absolute;top: 10px;right: 10px; } .flag img {width: 20px;max-width: 100%; }

IE8下文字自動(dòng)換行，其他瀏覽器都沒問題

解決方案如下：

max-width: 100%; -> max-width: none;

二、設(shè)置了z-index無效

設(shè)置元素的樣式中，position屬性值為absolute、relative或fixed時(shí)，用z-index設(shè)置層疊位置才有效。且屬性參數(shù)值越大，則該元素被層疊在最上面。

三、當(dāng)文字超出范圍時(shí)自動(dòng)補(bǔ)...省略號

１、CSS2只能實(shí)現(xiàn)單行補(bǔ)略

overflow: hidden; text-overflow: ellipsis;
white-space:nowrap;

2、CSS3可以實(shí)現(xiàn)多行補(bǔ)省略號,如下面3行補(bǔ)省略,注意控制好height與line-height

overflow: hidden; text-overflow: ellipsis; display:-moz-box; display:-webkit-box; display:box; -moz-line-clamp: 3; -webkit-line-clamp: 3; line-clamp: 3; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical;

四、實(shí)現(xiàn)垂直居中

水平居中的話，行級元素用text-align:center；塊級元素用margin:0 auto就可以實(shí)現(xiàn)水平居中。垂直居中則如下：

注意：這些方法對img有時(shí)不生效，如果考慮到圖片的垂直居中問題盡可能把圖片切出居中圖，也就是上下相等的透明區(qū)域就行了。

1、CSS2實(shí)現(xiàn)

1.1、行級元素

/**方式1**/
/**一般來說，直接把父元素的height與line-height設(shè)成一樣就可以**/ height:200px; line-height: 200px; /**方式2**/ /**父元素**/ height:200px; /**子元素，如img圖片**/ vertical-align: middle;

?注意小圖片如果用rem作為單位時(shí)，在安卓機(jī)上相對于父元素很難做到上下左右居中，這時(shí)可以用絕對定位處理

<div class="parent"><b class="child">38</b>元</div> <style> .parent{font-size: 48px;height: 100px;line-height: 100px;text-align: center; } .child{font-size: 80px;vertical-align: top; /* 這里要設(shè)頂對齊*/ } </style>

1.2、行級/塊級通用

/**方式1用table模型**/ /*父元素*/ display: table; /*子元素*/ display: table-cell; vertical-align: middle; /**方式2－絕對定位**/ /*父元素*/ position: relative; /*子元素*/ position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%; /**方式3-絕對定位:等高底padding**/ /*父元素*/ position: relative; /*子元素*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto;

2、CSS3實(shí)現(xiàn)

2.1、行級/塊級通用設(shè)置父元素,box-pack設(shè)置水平方向，值為start/center/end/justify；box-align設(shè)置垂直方向，值為start/center/end/baseline/stretch

/*******父元素*******/ /* Firefox */ display:-moz-box; -moz-box-pack:center; -moz-box-align:center;/* Safari, Chrome, and Opera */ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;/* W3C */ display:box; box-pack:center; box-align:center;

2.2、定位方式使上下左右居中

/*父元素要設(shè)position:relative;*/.center{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); }

?五、實(shí)現(xiàn)無縫十字邊框

　1、用border實(shí)現(xiàn)，樣板如下：

/***技巧就是每個(gè)框設(shè)個(gè)-1的margin***/ border: 1px solid #ddd; margin-bottom: -1px; margin-left: -1px;

?2、用margin實(shí)現(xiàn)，樣板如下：

主要實(shí)現(xiàn)代碼如下：

<div class="container"><div class="row clearfix"><div class="column4"></div><div class="column4"></div><div class="column4"></div><div class="column4"></div></div><div class="row clearfix"><div class="column4"></div><div class="column4"></div><div class="column4"></div><div class="column4"></div></div> </div> <style> /**容器,內(nèi)容部分為100,其余15為margin-right**/ .container{ width:115px; overflow:hidden; } /**行總長120，但可顯示部分115，超出部分被hidden**/ .row {width: 120px; } /**每個(gè)25，margin-right:5**/ .column4{float:left;background-color:#fff;width: 25px;height: 25px;margin-right: 5px; margin-bottom: 5px; } </style>

?六、Iphone APP Webview中 A標(biāo)簽失效問題

給a標(biāo)簽加上手勢就可以解決

a{cursor:pointer;}

?七、Iphone/Android APP Webview中 H5頁面與APP如何進(jìn)行數(shù)據(jù)交互

主要是APP端定義好接收事件js接口,然后H5頁面調(diào)用js函數(shù)傳數(shù)據(jù)，如下：

<div class="item"><div class="img" data-url="http://www.baidu.com"><img src="http://www.abc.com/a.jpg"></div></div><script>function sendToApp(val) {//發(fā)送數(shù)據(jù)給APPvar str = val;//console.log(str); inAppjs.runOnJavaScript(str);//app定義好的接收數(shù)據(jù)函數(shù) }$(document).on('click', '.img', function () {var url = $(this).attr('data-url');var _val = '{"type":2,"url":"' + url + '","value":""}';//app接收的是json格式的數(shù)據(jù)，但以string格式傳送sendToApp(_val);});</script>

八、如何能讓H5頁面適應(yīng)所有分辨率的手機(jī)

方式<1>、如果是viewport已經(jīng)寫好的舊項(xiàng)目，如下面的viewport已經(jīng)定義好為物理寬度，不想大改，則只寫media query進(jìn)行修改，對設(shè)計(jì)圖進(jìn)行非高保真輸出

/*兼容處理*/@media screen and (min-width: 320px) and (max-width:359px) {/*下面填寫iphone 4/5樣式*/ }@media screen and (min-width: 360px) and (max-width:374px) {/*下面填寫其他小屏android手機(jī)樣式*/ }@media only screen and (min-width: 375px) and (max-width:413px) {/*下面填寫iphone 6樣式*/ }@media only screen and (min-width: 414px) and (max-width:479px) {/*下面填寫iphone 6 plus樣式*/ }

方式<2>、使用起來非常順手，用rem作為單位進(jìn)行開發(fā)自適應(yīng)頁面，當(dāng)然最好結(jié)合less或者sass進(jìn)行開發(fā)，定義好pix轉(zhuǎn)rem函數(shù)，不然每次都要進(jìn)行單位的計(jì)算把px轉(zhuǎn)換成為rem；現(xiàn)以UI圖寬750px為例子，則可以這樣進(jìn)行開發(fā)，基本上對設(shè)計(jì)圖進(jìn)行高保真輸出，但沒解決多倍像素輸出1px問題，但個(gè)人覺得已經(jīng)夠用

也是使用1比1viewport

JS動(dòng)態(tài)設(shè)置html根元素的font-size　

? ? ? ? ? ? ? ? ?if (screenW / 10 > 70) {//Mobile QQ
? ? ? ? ? ? ? ? ? ? document.querySelector('html').style.fontSize = screenW / dpr / 10 + 'px';
? ? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? document.querySelector('html').style.fontSize = screenW / 10 + 'px';
? ? ? ? ? ? ? ? ?}

} else {if (window.innerWidth <= 750) {document.querySelector('html').style.fontSize = window.innerWidth / 10 + 'px';}elsedocument.querySelector('html').style.fontSize = 75 + 'px';}}setMeta();window.onresize = function () {setMeta();} }()

方式<３>、沒定義Viewport情況下，則比較麻煩的要判斷-webkit-min-device-pixel-ratio

/*兼容處理*/@media screen and (min-width: 320px) and (max-width:359px) {/*下面填寫iphone 4/小屏android手機(jī)*/ }@media screen and (min-width: 320px) and (max-width:359px) and (-webkit-min-device-pixel-ratio : 2) {/*下面填寫iphone 4s/5/5s樣式*/ }@media screen and (min-width: 360px) and (max-width:374px) {/*下面填寫360－374小屏android手機(jī)樣式*/ }@media only screen and (min-width: 375px) and (max-width:413px) {/*下面填寫375－413小屏android手機(jī)樣式*/ }
@media only screen and (min-width: 375px) and (max-width:413px) and (-webkit-min-device-pixel-ratio : 2) {/*下面填寫iphone 6樣式*/ }
@media only screen and (min-width: 414px) and (max-width:479px){/*下面填寫414－479大屏android手機(jī)樣式*/ }
@media only screen and (min-width: 414px) and (max-width:479px) and (-webkit-min-device-pixel-ratio : 3) {/*下面填寫iphone 6 plus樣式*/ }
@media only screen and (min-width: 480px){/*下面填寫其他大屏android手機(jī)樣式*/ }

九、IOS iphone/ipad safari 微信瀏覽器在input focus彈出輸入法時(shí) position:fixed失效問題

if (navigator.userAgent.match(/iPhone|iPod|iPad/i)) {//只要把position設(shè)為absolute就可以了$(fixedObj).css("position","absolute");}

十、如何用CSS修改HTML5 input/textarea的 placeholder的文字顏色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; } input:-moz-placeholder, textarea:-moz-placeholder { color: #666; } input::-moz-placeholder, textarea::-moz-placeholder { color: #666; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #666; }

十一、ios中input被默認(rèn)加上了圓角問題

input {border-radius: 0; }

十二、marquee標(biāo)簽無js實(shí)現(xiàn)各種文字滾動(dòng)代碼(適用公告)

各參數(shù)詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認(rèn)為6，建議設(shè)為1～3比較好。
b)width和height，表示滾動(dòng)區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動(dòng)的時(shí)候，一定要設(shè)height的值。
c)direction。表示滾動(dòng)的方向，默認(rèn)為從右向左：←←←?？蛇x的值有right、down、up。滾動(dòng)方向分別為：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認(rèn)為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
e)behavior。用它來控制屬性，默認(rèn)為循環(huán)滾動(dòng)，可選的值有alternate(交替滾動(dòng))、slide(幻燈片效果，指的是滾動(dòng)一次，然后停止?jié)L動(dòng))
f)loop。loop="2"滾動(dòng)2次、loop="infinite"或者loop="-1"無限循環(huán)滾動(dòng)
g)hspace和vspace。決定滾動(dòng)矩形區(qū)域距周圍的空白區(qū)域

還可以在標(biāo)簽內(nèi)插入圖片、表格、flash和marquee自身

例子如下：

十三、修改滾動(dòng)條樣式

/**webkit瀏覽器**/::-webkit-scrollbar { /* 1 */ }::-webkit-scrollbar-button { /* 2 */ }::-webkit-scrollbar-track { /* 3 */ }::-webkit-scrollbar-track-piece { /* 4 */ }::-webkit-scrollbar-thumb { /* 5 */ }::-webkit-scrollbar-corner { /* 6 */ }::-webkit-resizer { /* 7 */ }

十四、REM部局時(shí)，元素設(shè)的height與line-height在安卓瀏覽器中出現(xiàn)偏差問題

over-flow:hidden;line-height: 0.36rem;height: 0.72rem;/**表現(xiàn)出來如果文字超2行在某些安卓機(jī)會(huì)沒完全遮住第三行文字問題**/

解決辦法：只能把height調(diào)略小一點(diǎn)

十五、在APP中，解決webview中h5樣式或者js緩存問題

解決辦法：如果要對已上線的頁面中的js和css樣式做修改，最好是直接寫到頁面中來解決APP緩存不更新問題

十六、新版的安卓版微信在鍵盤彈出時(shí)不會(huì)觸發(fā)resize動(dòng)作，導(dǎo)致遮擋住輸入框問題

// 1. 參考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element// Android 手機(jī)下, input 或 textarea 元素聚焦時(shí), 主動(dòng)滾一把if (/Android/gi.test(navigator.userAgent)) {window.addEventListener('resize', function () {if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {window.setTimeout(function () {document.activeElement.scrollIntoViewIfNeeded();}, 0);}})}

下面方法已失效

解決辦法：彈出鍵盤時(shí)用margin把可視區(qū)蹭高50%的高度咯，收回鍵盤時(shí)再恢復(fù)margin，捕獲focus和blur事件

應(yīng)用實(shí)例-fixed在底部的評論框

//點(diǎn)擊發(fā)評論var isANW = isAndroidNewWechat();$("#dd_comment_btn,#dd_comment").click(function () {var This = $("#comment-box-bt");This.toggleClass("hide");if (!This.hasClass("hide")) {if (navigator.userAgent.indexOf('iPhone') > -1) {//修復(fù)iphone bug$("#gd_bottom_fixed_menu").css("position", "absolute");}else if (isANW) {//修復(fù)新版微信瀏覽器bug$("#gd_bottom_fixed_menu").css("bottom", $(window).height() / 2 + "px");}This.find("#comment").focus();} else {if (navigator.userAgent.indexOf('iPhone') > -1) {//修復(fù)iphone bug$("#gd_bottom_fixed_menu").css("position", "fixed");} else if (isANW) {//修復(fù)新版微信瀏覽器bug$("#gd_bottom_fixed_menu").css("bottom", 0);}}});$("#comment").focus(function () {if (isANW) {//修復(fù)新版微信瀏覽器bug$("#gd_bottom_fixed_menu").css("bottom", $(window).height() / 2 + "px");}});$("#comment").blur(function () {//修復(fù)iphone bugsetTimeout(function () {if (navigator.userAgent.indexOf('iPhone') > -1) {$("#gd_bottom_fixed_menu").css("position", "fixed");} else if (isANW) {//修復(fù)新版微信瀏覽器bug$("#gd_bottom_fixed_menu").css("bottom", 0);}}, 100);});

十七、移動(dòng)端近似解決1像素邊框問題[已優(yōu)化]

參考自：http://weui.github.io/weui/weui.css

移動(dòng)端如果頭部設(shè)了

則如果給元素設(shè)1px的邊框，不同dpr比率的手機(jī)表現(xiàn)出來的邊框都不一樣，dpr為2時(shí)1px邊框看上去是2px，同理3時(shí)就是3px，可以用以下辦法畫出近似1px的邊框：

.border-bottom {position: relative; }.border-bottom::after { /* 其他的也類似 */content: '';display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;-webkit-transform: scale(1,.5);transform: scale(1,.5);-webkit-transform-origin: 0 bottom;transform-origin: 0 bottom;background-color: #000; }

現(xiàn)在市面上大部分手機(jī)都是高清屏DRP基本都是大于1，解決辦法就是通過transform:scale(0.5)來把1像互的線縮小一半讓線看上去細(xì)小一點(diǎn)

十八、用rem設(shè)備圖片背景時(shí)會(huì)出現(xiàn)圖片邊邊被截情況

處理方法是直接把width和height設(shè)大1個(gè)單位，background-size不變

十九、小米4c系列，對input類型的按鈕點(diǎn)擊不了/點(diǎn)擊沒響應(yīng)的問題

處理方法是給input增加display為block或者inline-block就可以了

二十、CSS3水平陰影、豎直陰影

.v_shadow{ box-shadow: 0 4px 3px rgba(0,0,0,0.25); } .h_shadow{ box-shadow: 4px 0px 3px rgba(0,0,0,0.25); }

二十一、華為手機(jī)虛擬鍵盤擠壓屏幕高度

滿屏頁面，設(shè)計(jì)時(shí)考慮元素不能擠太滿

二十二、微信長按識別二維碼只針對img有效，圖片背景無效，而且同屏兩二維碼，只能識別第一個(gè)

解決方案：可以給每個(gè)二維碼添加點(diǎn)擊彈出單獨(dú)的放大二維碼圖片遮罩事件

二十三、流式部局

部局和設(shè)計(jì)時(shí)要考慮

Flex 布局教程：實(shí)例篇

常用方式：

/**父元素**/ display: flex; align-items: center; justify-content: center;display: flex; justify-content: space-between; flex-wrap: wrap; align-content: flex-start;/**子元素**/ flex: auto;flex: none;

二十四、進(jìn)度條

?html代碼：

sass代碼：

.progress {width: 100%;height: r(10);overflow: hidden;border-radius: r(5);background-color: #ccc;position: relative;margin-top: r(25);.progress_bar {position: absolute;z-index: 2;height: r(10);width: 0;top: 0;left: 0;border-radius: r(5);background-color: #ccc;-webkit-transition: width 1s ease-in;&.active {background-color: #f93136;}}}

二十五、文字描邊

text-shadow: 3px 3px 3px #720005, -3px -3px 3px #720005,3px 0 3px #720005,0 3px 3px #720005,0 -3px 3px #720005, -3px 0 3px #720005;

二十六、去掉ios默認(rèn)給input加上的圓角

input[type="number"],input[type="text"]{border-radius:0; }

二十七、CSS3背景色漸變

background: linear-gradient(to bottom, #fff 0%,#bbb 100%);

二十八、CSS3內(nèi)發(fā)光、外發(fā)光

-webkit-box-shadow: 0 0 50px rgba(40, 0, 2, 0.50); /*外陰影或外發(fā)光*/ -webkit-box-shadow: inset 0 0 50px rgba(91, 0, 4, 0.5); /*內(nèi)陰影或內(nèi)發(fā)光*/

二十九、IOS Webview中的h5頁面上除A標(biāo)簽外的其他dom元素要做成可點(diǎn)擊必需加上cursor: pointer樣式

.clickable {cursor: pointer; }

三十、魅族 Webview中的h5頁面獲取到的屏幕寬度不準(zhǔn)的問題

解決方案：讓APP把屏寬以參數(shù)的形式轉(zhuǎn)給H5。?

三十一、華為自帶瀏覽器不支持流式布局

解決方案：使用普通的布局方式。　

三十二、transition動(dòng)畫中用left制作動(dòng)畫可能會(huì)出現(xiàn)卡卡的不流暢

解決方案：使用translate3D方式制作動(dòng)畫就可以了?！?/p>

三十三、像素pixel轉(zhuǎn)rem和Rem轉(zhuǎn)像素pixel

function p2R(pixel, mock_width_px, mock_width_rem) { // 像素轉(zhuǎn)REMvar mock_width_px = mock_width_px || 750, // UI設(shè)計(jì)圖的寬度 (pixel)mock_width_rem = mock_width_rem || 10; // UI設(shè)計(jì)圖的寬度 (rem)return parseFloat((pixel * mock_width_rem / mock_width_px).toFixed(3)) + 'rem';}function r2P(rem, mock_width_px, mock_width_rem) { // REM轉(zhuǎn)像素var mock_width_px = mock_width_px || 750, // UI設(shè)計(jì)圖的寬度 (pixel)mock_width_rem = mock_width_rem || 10; // UI設(shè)計(jì)圖的寬度 (rem)return parseFloat((rem * mock_width_px / mock_width_rem).toFixed(3)) + 'px';}

三十四、CSS3 :nth-child(n) 選擇器和:nth-of-type() 選擇器

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素（由１開始，不是０），不論元素的類型。n可以是odd、even、數(shù)字或者?公式 an + b（n 是計(jì)數(shù)器，從 0 開始，b 是偏移值）。

:nth-of-type(n) 選擇器，該選擇器選取父元素的第 N 個(gè)指定類型的子元素（由１開始，不是０）。n可以是odd、even、數(shù)字或者?公式?an + b（n 是計(jì)數(shù)器，從 0 開始，b 是偏移值）。還有:first-of-type和:last-of-type兩種寫法　　

三十五、IOS APP webview中的h5頁面中的fixed在底部的dom元素顯示不全或者被截掉不顯示問題

1、先確定是不是IOS webview 64像數(shù)下移的問題。如果是的話讓ＩＯＳ開發(fā)修復(fù)bug。

2、可以設(shè)置塊元素padding-bottom及fixed塊元素bottom略高一點(diǎn)讓其顯示出來，如下：

if(navigator.userAgent.match(/iPhone|iPod|iPad/i)){document.querySelector('.body_el').style.paddingBottom = '2rem';document.querySelector('#fixed_el').style.bottom = '2.4rem';}

三十六、兼容微信音頻播放。

<audio controls="controls" style="display:none;" id="count_sound" preload="auto" autoplay="autoplay" src="dist/sound/demo.mp3">Your browser does not support the audio tag.</audio> <script>//一般情況下，這樣就可以自動(dòng)播放了，但是一些奇葩iPhone機(jī)不可以，iphone對mp3的容錯(cuò)不好，所以有些mp3在安卓可以播但在iphone不能播，要注意mp3質(zhì)量 document.getElementById('count_sound').play();//必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () {document.getElementById('count_sound').play();}, false); </script>

三十七、相鄰帶背景圖的兩個(gè)元素，用負(fù)數(shù)margin會(huì)出現(xiàn)背景疊加。

相鄰帶背景圖的兩個(gè)元素盡量少用負(fù)數(shù)margin

三十八、background-size設(shè)為100% auto時(shí)repeat背景在部分華為手機(jī)沒效問題。

解決方案：可以不用auto設(shè)為固定大小

background: url(../img/fkjz/repeat.png) repeat-y; background-size: 100% 1px;

三十九、彈框里的滾動(dòng)條滾動(dòng)時(shí)，外部body也跟著滾動(dòng)的問題。

解決方案：彈框彈出時(shí)，可以把body的position設(shè)為absolute;top:0;left:0;

四十、Rem單位設(shè)置的小圓圈在安卓手機(jī)上不圓的問題。

解決方案：用js動(dòng)態(tài)添加樣式，如下代碼，

// 修復(fù)圓點(diǎn)不圓function fixedCircles() {var rootRem = document.querySelector('html').style.fontSize.replace('px', '');var width_middle = parseInt(rootRem * 0.213),width_small = parseInt(rootRem * 0.16);$('<style>.distribution ul li span:before{width: ' + width_middle + 'px;height: ' + width_middle + 'px;-webkit-border-radius: 50%;border-radius: 50%;}.records .band:before{width: ' + width_small + 'px;height: ' + width_small + 'px;-webkit-border-radius: 50%;border-radius: 50%;}</style>').appendTo('head'); }

四十一、在ios的webview中使用fixed在頂部的內(nèi)容導(dǎo)致下拉刷新被阻擋問題。

解決方案：用js動(dòng)態(tài)設(shè)置為abolute，放手后再設(shè)為fixed

.fixedTopObj.abs {position: absolute; } .fixedTopObj{position: fixed;top:0;left:0; } var $fto= document.querySelector('.fixedTopObj');window.addEventListener('scroll', function (event) {var currentST = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;if (currentST <= 0) {if (!$fto.classList.contains('abs')) {$fto.classList.add('abs');}} else {if ($fto.classList.contains('abs')) {$fto.classList.remove('abs');}}}, false);

四十二、web中彈出彈框后，要求滾動(dòng)彈框內(nèi)容時(shí)，背景元素不能滾動(dòng)，關(guān)閉彈框后要求背景元素位置保持不變解決方案

解決方案：用js動(dòng)態(tài)設(shè)置body、body的子元素pageview包層的樣式，代碼如下：

html代碼：

js/jQuery代碼：

$('#dlg_btn__open').click(function () {// ...其他處理var st = $(window).scrollTop();$('body').css({ height: '100%', overflowY: 'hidden' }); // 背景固定$('.pageview').css({ position: 'fixed', top: (-1 * st) + 'px' }); // 背景固定});$('#dlg_btn__close').click(function () {// ...其他處理var st = $('.pageview').css('top').replace('-', '').replace('px', '');$('body').css({ height: 'auto', overflowY: 'visible' });// 取消背景固定$('.pageview').css({ position: 'relative', top: 0 });// 取消背景固定window.scrollTo(0, st);// 滾到原來位置});

四十三、overflow:auto及overflow:scroll的區(qū)別

overflow:auto是當(dāng)超出特定塊內(nèi)高度或者寬度時(shí)才出現(xiàn)滾動(dòng)條，overflow:scroll是總時(shí)顯示滾動(dòng)條

四十四、H5,CSS3,js動(dòng)畫FPS(幀頻)要達(dá)到60才不會(huì)感覺到卡

四十五、如何使用HSL(H,S,L)來設(shè)置顏色？

background-color: hsl(360, 100%, 50%); /* HSL(H,S,L): H：Hue(色調(diào))。0(或360)表示紅色,30表示橙色，60表示黃色，120表示綠色，240表示藍(lán)色，270表示紫色，300表示粉色，也可取其他數(shù)值來指定顏色。取值為：0 - 360 S：Saturation(飽和度)。取值為：0.0% - 100.0% L：Lightness(亮度)。取值為：0.0% - 100.0% */

四十六、pointer-events，一個(gè)神奇的css屬性

對某一個(gè)元素比如div采用div{pointer-events:none}即可讓這個(gè)HTML元素（包括它的所有子孫元素）失去所有的事件響應(yīng)。鼠標(biāo)焦點(diǎn)會(huì)直接無視它，click、mouseover等所有事件會(huì)穿透它到達(dá)它的下一級元素，適用于要用到遮罩或者裝飾用的頂層元素，但其不能阻擋下層元素的點(diǎn)擊事件的情況。

四十七、CSS3屬性-webkit-font-smoothing字體抗鋸齒渲染

[class^="weui-icon-"], [class*=" weui-icon-"] {text-rendering: auto;-webkit-font-smoothing: antialiased; }

通常是icon文字需要用到，如weui

四十八、white-space 屬性設(shè)置按內(nèi)容的空白及換行原樣顯示

.like-pre { white-space: pre-wrap; word-wrap: break-word; }

四十九、數(shù)字badge由圓圈到圓角橢圓自動(dòng)伸長技巧

.round {background-color: #28a745;min-width: 18px;height: 18px;line-height: 18px;text-align: center; }

五十、移動(dòng)端h5頁面必須重置的樣式及meta設(shè)置

<meta content="always" name="referrer"> <meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection">

* {margin: 0;padding: 0;vertical-align: baseline;background: transparent;-webkit-touch-callout: none;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: transparent;-webkit-appearance: none;list-style: none; }html * {outline: 0;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input[type="button"], input[type="submit"], input[type="reset"], input[type="disabled"] {-webkit-appearance: none; }input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none !important; } -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; /*抗鋸齒*/

五十一、指定SVG元素path的渲染模式:shape-rendering

auto讓瀏覽器自動(dòng)權(quán)衡渲染速度、平滑度、精確度。默認(rèn)是傾向于精確度而非平滑度和速度。optimizeSpeed偏向渲染速度，瀏覽器會(huì)關(guān)閉反鋸齒模式。（速度）crispEdges偏向更加清晰銳利的邊緣的渲染。瀏覽器在渲染的時(shí)候會(huì)關(guān)閉反鋸齒模式，且會(huì)讓線條的位置和寬度和顯示器邊緣對齊。（銳度）geometricPrecision偏向渲染平滑的曲線。（平滑）

shape-rendering: geometricPrecision:

shape-rendering: optimizeSpeed

五十二、解決ios下的微信打開的頁面背景音樂無法自動(dòng)播放

<audio?id="Jaudio"?class="media-audio"?src="bg.mp3"?preload?loop="loop"></audio?> function?audioAutoPlay(id){var?audio?=?document.getElementById(id);audio.play();document.addEventListener("WeixinJSBridgeReady",?function?()?{audio.play();},?false); } audioAutoPlay('Jaudio');

五十三、iphoneX安全區(qū)域問題

https://www.cnblogs.com/lolDragon/p/7795174.html

五十四、flex-wrap: wrap相對較舊版本手機(jī)自帶瀏覽器不換行問題如何解決？

對于父元素有必要就text-align:center；子元素就設(shè)置display:inline-block。

五十五、段落縮進(jìn)及字間間距樣式:text-indent及l(fā)etter-space

p{letter-space: 1px; text-indent: 60px; }

段落字間間隙1px，首行縮進(jìn)60px（差不多兩個(gè)字）

五十六、flex布局子元素在低版本安卓機(jī)上justify-content:space-between失效問題

先檢查子元素是不是塊元素，如果不是設(shè)置display:block就可以解決問題

五十七、如何解決移動(dòng)端hover的問題？

思路一：用:active代替，直接可以解決，最快。

思路二：用js綁定button、a標(biāo)簽等對象的touchstart,touchend和click事件來動(dòng)態(tài)增減樣式

<buttonclass="btn"@click="addFeedback"@touchstart="touchStart"@touchend="touchEnd">按鈕</button> touchStart (e) { // 優(yōu)化移動(dòng)端hover體驗(yàn)try {e.target.classList.remove('btn--blur')} catch (error) { }},touchEnd (e) { // 優(yōu)化移動(dòng)端hover體驗(yàn)try {e.target.classList.add('btn--blur')} catch (error) { }},click (e) { // 優(yōu)化移動(dòng)端hover體驗(yàn)try { e.target.classList.remove('btn--blur')setTimeout(() => {e.target.classList.add('btn--blur')}, 500)} catch (error) { }},

.btn {display: block;width: 100%;height: 100%;font-family: PingFangSC-Regular;font-size: 30px;text-align: center;background: #018fff;border: none;padding: 0;margin: 0;&:hover {background: rgb(0, 97, 172);}&--blur:hover {background: #018fff;}} }

五十八、寫向上滾動(dòng)動(dòng)畫時(shí)使用偽元素用作漸變透明遮罩圖層時(shí)會(huì)出現(xiàn)底邊閃爍問題

解決方法是使用div代替?zhèn)卧貏偃螡u變透明遮罩，并增加負(fù)值bottom

&__cover {width: 100%;height: 100%;background: linear-gradient(to bottom,transparent 0%,rgba(0, 0, 0, 1) 100%);position: absolute;bottom: -25px; left: 0;}

修復(fù)后效果如下，向上滾動(dòng)時(shí)底部沒閃爍問題出現(xiàn)了：

五十九、給tbody設(shè)置transform屬性導(dǎo)致thead的z-index 無效問題?

不用定義 z-index ，所以把 position 也刪了。為 thead
定義 transform: translate3d(0px, 0px, 1px)Z 軸比 tbody 高。
這方式要想在chrome有效還要做多一步，就是html的結(jié)構(gòu)要稍變一下把thead與tbody的順序調(diào)換一下就可以了

六十、web font-size選擇，web設(shè)計(jì)稿寬度通用選擇?

font-size選擇，移動(dòng)端使用像數(shù)16px為基準(zhǔn)做rem，PC端使用12px

設(shè)計(jì)稿寬度：PC端寬度發(fā)展960px -> 1200px ->?1400px ->19200px?

? ? ? ? ? ? ? ? ? ? ? 移動(dòng)端通用稿寬度750px

參考：https://www.ui.cn/detail/218904.html

六十一、iPhoneX適配問題

參考：https://segmentfault.com/p/1210000012391116/read

也可以用媒體查詢針對性設(shè)置

轉(zhuǎn)載于:https://www.cnblogs.com/fastmover/p/4873765.html

總結(jié)

以上是生活随笔為你收集整理的前端页面布局常见问题/已踩过的坑大杂烩的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Redis 发布订阅，小功能大用处，真没
下一篇： 2019.07.11

HTML

前端页面布局常见问题/已踩过的坑大杂烩

目錄

一、IE8下[圖片加文字]展示時(shí)自動(dòng)換行的問題

二、設(shè)置了z-index無效

三、當(dāng)文字超出范圍時(shí)自動(dòng)補(bǔ)...省略號

四、實(shí)現(xiàn)垂直居中

?五、實(shí)現(xiàn)無縫十字邊框

?六、Iphone APP Webview中 A標(biāo)簽失效問題

?七、Iphone/Android APP Webview中 H5頁面與APP如何進(jìn)行數(shù)據(jù)交互

八、如何能讓H5頁面適應(yīng)所有分辨率的手機(jī)

九、IOS iphone/ipad safari 微信瀏覽器在input focus彈出輸入法時(shí) position:fixed失效問題

十、如何用CSS修改HTML5 input/textarea的 placeholder的文字顏色

十一、ios中input被默認(rèn)加上了圓角問題

十二、marquee標(biāo)簽無js實(shí)現(xiàn)各種文字滾動(dòng)代碼(適用公告)

十三、修改滾動(dòng)條樣式

十四、REM部局時(shí)，元素設(shè)的height與line-height在安卓瀏覽器中出現(xiàn)偏差問題

十五、在APP中，解決webview中h5樣式或者js緩存問題

十六、新版的安卓版微信在鍵盤彈出時(shí)不會(huì)觸發(fā)resize動(dòng)作，導(dǎo)致遮擋住輸入框問題

十七、移動(dòng)端近似解決1像素邊框問題[已優(yōu)化]

十八、用rem設(shè)備圖片背景時(shí)會(huì)出現(xiàn)圖片邊邊被截情況

十九、小米4c系列，對input類型的按鈕點(diǎn)擊不了/點(diǎn)擊沒響應(yīng)的問題

二十、CSS3水平陰影、豎直陰影

二十一、華為手機(jī)虛擬鍵盤擠壓屏幕高度

二十二、微信長按識別二維碼只針對img有效，圖片背景無效，而且同屏兩二維碼，只能識別第一個(gè)

二十三、流式部局

二十四、進(jìn)度條

二十五、文字描邊

二十六、去掉ios默認(rèn)給input加上的圓角

二十七、CSS3背景色漸變

二十八、CSS3內(nèi)發(fā)光、外發(fā)光

二十九、IOS Webview中的h5頁面上除A標(biāo)簽外的其他dom元素要做成可點(diǎn)擊必需加上cursor: pointer樣式

三十、魅族 Webview中的h5頁面獲取到的屏幕寬度不準(zhǔn)的問題

三十一、華為自帶瀏覽器 不支持流式布局

三十二、transition動(dòng)畫中用left制作動(dòng)畫可能會(huì)出現(xiàn)卡卡的不流暢

三十三、像素pixel轉(zhuǎn)rem和Rem轉(zhuǎn)像素pixel

三十四、CSS3 :nth-child(n) 選擇器和:nth-of-type() 選擇器

三十五、IOS APP webview中的h5頁面中的fixed在底部的dom元素顯示不全或者被截掉不顯示問題

三十六、兼容微信音頻播放。

三十七、相鄰帶背景圖的兩個(gè)元素，用負(fù)數(shù)margin會(huì)出現(xiàn)背景疊加。

三十八、background-size設(shè)為100% auto時(shí)repeat背景在部分華為手機(jī)沒效問題。

三十九、彈框里的滾動(dòng)條滾動(dòng)時(shí)，外部body也跟著滾動(dòng)的問題。

四十、Rem單位設(shè)置的小圓圈在安卓手機(jī)上不圓的問題。

四十一、在ios的webview中使用fixed在頂部的內(nèi)容導(dǎo)致下拉刷新被阻擋問題。

四十二、web中彈出彈框后，要求滾動(dòng)彈框內(nèi)容時(shí)，背景元素不能滾動(dòng)，關(guān)閉彈框后要求背景元素位置保持不變解決方案

四十三、overflow:auto及overflow:scroll的區(qū)別

四十四、H5,CSS3,js動(dòng)畫FPS(幀頻)要達(dá)到60才不會(huì)感覺到卡

四十五、如何使用HSL(H,S,L)來設(shè)置顏色？