标签:浏览器 E5% IE6 图片 从零开始 兼容性问题 识别 前端开发 属性
原文链接:https://www.mk2048.com/blog/blog.php?id=h020hh2bkh0j&title=%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91+%E2%80%94+8%E3%80%81%E5%B8%B8%E8%A7%81%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%一、常见浏览器兼容性问题
1.双倍浮动bug描述:块状元素设置了float后,又设置了横向的margin,在IE6下显示的margin值要比设置的值大
解决方案: 给float的元素添加display:inline;将其转换为行内元素
2.表单元素行高不一致
解决方案:
方案一: 给表单元素添加 vertical-align:middle;
方案二: 给表单元素添加 float:left;
3.IE6不识别高度小于10px的容器
解决方案:
方案一: 给元素设置 overflow:hidden;
方案二: 给元素设置 font-size:0;
4.放在超链接中的图片默认有边框(在某些浏览器中)
解决方案:
给图片添加border:0;或border:none;
5.IE6不识别min-height属性
解决方案:
方案一: min-height:100px; _height:100px;
方案二: min-height:100px; height:auto!important; height:100px;
6.图片默认有空隙
解决方案:
方案一:给img添加float属性 (适用于有多张图片在一行显示的情况)
方案二:给img添加display:block; (适用于只有一张图片的情况)
7.百分比bug
描述:父元素宽度100%,子元素宽度50%,在IE6下50% 50%大于100%,右侧的子元素会掉下来
解决方案:
给右侧浮动元素清除右浮动 clear:right;
8.IE浏览器不识别opacity属性
解决方案:针对IE浏览器写透明度设置:
filter:alpha(opacity=数值); (取值范围1-100)
eg: .box{
opacity:.6;
filter:alpha(opacity=60);
}
9.鼠标指针bug
描述:cursor的hand属性只有IE浏览器识别,其他浏览器不识别
解决方案:
使用cursor:pointer;IE6及以上浏览器和其他浏览器都识别
注: cursor:pointer;是将鼠标指针的形状设置为手型
10.按钮默认大小不一
解决方案:
方案一:用a标签模拟按钮
方案二:如果按钮是一张图片,直接将图片作为按钮的背景图片插入即可
11.上下margin重叠问题
描述:当给上面元素设置margin-bottom,给下面元素设置margin-top,此时只能识别其中较大的那个值
解决方案:
方案一:margin-top和margin-bottom只设置其中的一个值
方案二:给上面的元素外面包一个容器,并设置overflow:hidden;
二、css hack
1.概念:针对不同内核的浏览器出现的兼容性问题的处理方法就叫做css hack
2.过滤器
a)下划线属性过滤器语法: 选择器{_属性:属性值;}
eg: .box{height:150px;_height:100px;}
注:下划线属性过滤器只有IE6及以下版本识别,其他浏览器不识别
b)!important关键词过滤器语法: 选择器{属性:属性值!important;}
eg: .box{background:red!important;background:blue;}
注:加!important的css属性优先级最高,但是IE6及以下版本的浏览器不识别
c)*属性过滤器语法: 选择器{*属性:属性值;}
eg: .box{background:blue;*background:pink;}
注:*属性过滤器只有IE6,IE7识别,其他浏览器都不识别
d) \9语法: 选择器{属性:属性值\9;}
注: 只有IE6,7,8识别,其他浏览器都不识别
e) \0语法: 选择器{属性:属性值\0;}
注:IE8及以上浏览器识别,其他浏览器都不识别
三、市场主流五大浏览器内核
1.IE浏览器 内核: Trident(IE内核)
2.Mozilla Fox(火狐) 内核:Gecko
3.Safari(苹果浏览器),Chrome(谷歌浏览器) 内核:Webkit
4.Opera(欧朋) 内核:Presto
5.最新版本的chrome浏览器 内核:Blink
附录:
图片整合技术
一、Css sprites(图片整合技术)
概念:将多张背景图片整合到一张背景图中,通过background-position来实现背景图定位技术称为图片整合。
我们也把图片整合技术叫做精灵图,雪碧图,滑动门技术。
二、图片整合的优势(优点)
1.将多张图片整合到一张图中,减少了对服务器的请求次数,减轻了对服务器的压力,加快了图片的加载速度。
2.同时也减小了图片体积,达到了网站性能的优化。
SEO优化
SEO—搜索引擎优化分为站内优化和站外优化两个方面
站内优化:
1.页面标题优化:在head部分添加一个有意义的title标题
2.页面头部优化:在head部分添加关键词和描述
<meta name="keywords" content="" /> 关键词
<meta name="description" content=""/> 描述
3.超链接优化
a)给a标签添加title属性
b) 尽量避免将超链接放置在flash中,seo无法识别flash中的文字
c) 尽量避免使用图片热点链接
4.图片优化
给img标签添加alt和title属性
5.添加网站地图或网站导航
可以让用户以最快的速度找到要浏览的内容
6.给网站添加友情链接
7.静态页面比动态页面更有利于搜索引擎优化
注:随着搜索引擎的不断改进,搜索动态页面也会变得更加容易
8.避免"大体积"的页面,代码结构合理清晰
站外优化:
百度推广
网站流量分析
网站品牌建设
更多专业前端知识,请上【猿2048】www.mk2048.com
标签:浏览器,E5%,IE6,图片,从零开始,兼容性问题,识别,前端开发,属性 来源: https://blog.csdn.net/QDY5945/article/details/102755877
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。