HTML CSS微信CSS顯示一些總結

微信顯示網頁是調用騰訊自帶的瀏覽器內核，由於騰訊瀏覽器內核對css展示效果沒有谷歌瀏覽器好，導致用谷歌瀏覽器寫好的網頁，放到微信頁面之后，顯示的效果就發生變化，所以調整css樣式顯得那么吃力；

1、

<li ><img style="width:100%; height:12em;" src="..."/></li>

 

針對上面的css，android微信展示的效果：圖片高度12em,但是寬度並不能直接呈現100%；刷新頁面之后，圖片寬度100%，但是首次打開頁面，圖片的寬度並不是100%；

針對這種情況，我們只需要將style內容定義到父樣式中

 

這樣就展示圖我們要的效果；

2、

<div style="text-align:center;">
            <div id="divtemperature">
                <img src="images/control/temp.png"/>
                <label class="divtempnum" id="lbltem"><%= SetTemperature %></label>
                <font class="divtempnum">℃</font>
            </div>
            <p>已設定一小時后自動關機</p>
        </div>

這個樣式的展示效果放到手機微信之后，效果也不是預期效果，

這個就需要我們重新調整css內容，僅僅需要在div中添加一個display:block即可，如下

<div style="text-align:center;">
            <div id="divtemperature" style="display:block">
                <img src="images/control/temp.png"/>
                <label class="divtempnum" id="lbltem"><%= SetTemperature %></label>
                <font class="divtempnum">℃</font>
            </div>
            <p>已設定一小時后自動關機</p>
        </div>

有些東西，需要總結和細心分析；