现在的位置: 首页 > 综合 > 正文

snowinmay.net首页兼容性问题完善

2012年11月20日 ⁄ 综合 ⁄ 共 1132字 ⁄ 字号 评论关闭
版本:2013.4.19
最新:snowinmay.net
=====2013.4.19=====
问题描述:

为了让网站在移动端有良好的用户体验,当时在页面中加入了响应式设计的内容。具体就是当页面宽度小到一定程度就调用另外的css样式。
今天主要想完善一下图片加载的问题。
现在的解决方法:图片都单独存在,切换到某张图片的时候就让他显示。这样的问题是,网速不给力的时候,切换图片的时候,图片加载很慢,影响用户体验。
比较好的解决方法:
1.把图片集合到一起。
2.打开网站的时候就开始把图片载入。
3.点击图片的时候让图片有一个缓冲的过程再显示。
 
今天发现的问题:
用了响应式设计后,IE6,7,8识别不出来了。所以需要先判断一下浏览器。
解决方法是用条件注释判断浏览器。
 
其它问题。
IE6,7,8没有圆角
 
想给IE6,7,8加上圆角效果:1.图片背景(最实用),
2.让IE支持CSS 3圆角属性的方法。
 
IE6,7导航文字没有浮动。
原因是 block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
 
解决方法:
IE6下块元素如何实现display:inline-block的效果?
有两种方法: 1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容): 
div {display:inline-block;...} div {display:inline;}
2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/ div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

抱歉!评论已关闭.