微信瀏覽器和PC對於某些元素的解析不一樣

web移動版本開發，必需要用到自適應。實現自適應的無非兩種辦法：一種flex彈性盒子模型；一種百分比，使用百分比，必然會用到box-sizing: border-box。

補充一個知識點：CSS的盒子模型有兩種，一種是標準W3C盒子模型，一種是IE盒子模型。

簡言之，二者的區別就是：IE盒子模型的寬度包含padding和border的值，標準盒子模型不包含。

看圖說話：（PS圖片是盜用的 http://www.jb51.net/css/12199.html）

而後來講說開發中碰到的兩個問題：

    以下圖彈出框所示：左圖是在PC的效果，右圖是ios微信的效果。從圖中可以看出，PC中容器的高度=容器內容的高度；ios微信中容器的高度<容器內容的高度，（ios微信中容器的高度=ios微信中容器內容的高度-1）。補充：android微信中容器的高度=android微信中容器內容的高度-2。

  

一、微信和PC對行內元素解析方式不一樣。

    分析：上圖彈出框中有個span標籤，HTML：<span>詳細地址</span> CSS：span{line-height:45px;} PC對於span標籤的解析是45px，微信對於span標籤的解析是46px。

    解決辦法：將span標籤設置爲塊級元素。span{display:block;}  ---> 設置後，發現ios微信中容器的高度=ios微信中容器內容的高度，可是android微信中容器的高度=android微信中容器內容的高度-1，這個會在第二個問題中討論。

    類推：微信和PC只是對於span標籤的解析不一樣，仍是對於全部的行內元素解析方式都不相同？

    -------------------------------------------------------------------------------------

    結論：經過測試span、a、img，發現PC和微信對行內元素的解析方式，行內元素在微信中會多出1px的間隙，將行內元素設置爲塊級元素（display:block;）則在微信和PC解析結果相同。

二、ios微信、PC和android微信對於select的解析方式不一樣。

    當第一個問題解決以後，發現PC和ios微信相同，可是android微信中容器的高度=android微信中容器內容的高度-1。

    分析：上圖中對於地區選擇使用了select標籤，高度設置爲45px，PC和ios微信對select的解析都爲45px，可是android微信解析爲46px。

    解決辦法：將select設置爲塊級元素。select{display:block;} --->設置後，發現問題解決。

    補充：由於上圖彈出框中有兩個select，因此使用了display:flex; flex:1; 可是該屬性對於PC和ios微信都生效，對android微信卻不生效。由於上圖中彈出框的寬度是固定的，因此能夠經過給select設置width解決。select{width:74px;} --->若是彈出框的寬度不固定怎麼設置，這個後續再討論。