第125天 移動端 空白字元問題解決辦法

1、當我們想使用百分比來進行兩個盒子的併排

**：

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
style
>
6html,
7body 
1112
.container 
1718
.container > div 
2122
.left 
2728
.right 
33style
>
34head
>
3536
<
body
>
37<
div 
class
="container"
>
38<
div 
class
="left"
>
div>
39<
div 
class
="right"
>
div>
40div
>
41body
>
42html
>

當我們想通過inline-block讓兩個div來併排，乙個戰父盒子的80%，乙個佔20%。可能看起來剛好100%，但是會由於**中左右兩個盒子之間的空白字元會導致右邊的盒子掉下來。

（1）消除空白字元

讓左右兩個盒子的**緊密連起來，就是不要讓他們中間有空白字元

（2）給父盒子新增屬性font-size:0;來消除空白字元，推薦使用此方法

字母間距——letter-spacing

單詞間距——word-spacing

移動端svg不顯示問題解決

移動端svg不顯示問題解決 情況如此 svg使用方式 在css樣式中直接引用svg資料 background image url data image svg xml utf8,解決辦法 將svg資料單獨儲存在image檔案下的bg.svg，然後在css樣式中該用引用svg檔案的方式 backgro...

移動端頁面滾動穿透問題解決方案

最近在做移動專案時遇到乙個頁面滾動穿透問題，具體場景是這樣的，在乙個可滾動的列表頁中開啟彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，google一下出解決方案也是挺多的。以下根據不同的適用場景總結一些解...

移動端一畫素問題解決方案

在移動端解析度是不相同的,目前來說可以分一倍屏,二倍屏,三倍屏,在不同解析度上顯示的1畫素可能會被渲染為2個畫素點或者三個畫素點,這樣嚴重影響了美觀,所以我們要解決一畫素問題 html border div div css after裡面的width 200 height 200 就是把after元...