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>

有些东西,需要总结和细心分析;

时间: 2024-09-27 14:24:32

HTML CSS微信CSS显示一些总结的相关文章

css 超出部分显示省略号

代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解释:简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden:),然后出现省略号( text-overflow: ellipsis). text-ellipsis是一个特殊的样式,

FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; margin: 1em; } 当然简单如下的html是不能限制图片大小的 <div class=“picture-area”> <img src=“…” alt=“…”> </div> 换个思路,将图片作为div的背景图片 <div style=“background-ima

CSS的display显示

CSS的display显示 1. 行内元素和块级元素关系 块级元素:1.标题标签:h1~h6:2.段落标签:p1~p6:3.div:4.列表:等 行内元素:1.span:2.a:3.img:4.strong:等 二者关系: 行内元素可以包含在块级元素中: 块级元素不可以包含在行内元素中: 因此,导致一个问题:当想把块级元素放在一行时,会有问题.因此,出现了解决方案:display 2. 把块级元素放在一行 CSS语法格式:标签名 {display:inline;} 举例:列表是块元素,将其放在一

CSS 背景-CSS background

这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: background-color || background-image || background-repeat || background-attachment || background-

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可

CSS hack!css黑客攻击

简介 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack! 2原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对. 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * &q

Firefox与IE的CSS兼容CSS HACK技巧

1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中. 2.CSS 链接(a标签)的边框与背景 a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行.参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height

学无止境的CSS(xHTML+CSS技巧教程资源大全)

本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是 个啥玩意儿).应该说,你是否学Web标准,跟你是否能学会CSS没有什么关系,但跟你能写出什么样的CSS,以及XHTML或其它代码,跟你能做出什么 质量的网页有很大的关系. 其实我自己对We

css和css和html的四种结合方式

原文地址 使用html标签的style属性 每个html标签上面都有一个属性:style,把css和html结合在一起 示例:设置字体背景颜色为红色,字体颜色为黄色. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>结合方式一</title> </head> <body> <div style="ba