网站项目实战开发(二)

  • 编辑时间: 2014-07-25
  • 浏览量: loading
  • 作者: 段亮

网站项目实战开发(-)这篇文章中,也简单的跟大家说了下,在我们建立一个项目前期,应该做一些什么准备工作。为接下来的项目进行铺垫,这样就达到了很高的开发效率。那么今天我要跟大家分享什么呢?可能很多人,在做实际的项目实战中,总会遇到一些平常练习中没遇到的事情。那么接下来:我就跟大家分享下我们在真正的项目实战中,遇到一些问题该怎么去解决!

一、关于IE6的兼容问题

虽然说,微软已经宣布:不在对“IE6”进行漏洞补丁的升级。意味着IE6,就被市场淘汰了。这也是我们身为web前端人员的一大“福音”。从理论上是这样说,但事实上还有一些企业依然还在用IE6,只是随着时间的推移。以及程序的更新换代,IE6最终还是会离开我们的视野。但现在IE6还没完全被淘汰的时刻,身为专业的web前端程序员,我们依旧还得为了“IE6”而去解决网站的兼容性问题。

我觉得在实战中开发,出现得最多的"IE6"BUG为:双倍外边距。通常我们在其他浏览器,写CSS代码时,写外边距为margin-left:10px;那么在IE6中,就会认为你的margin-left值为20px,通常我们会使用display:inline来解决。因此我认为:尽量能用其它方法能解决的情况下,就少用margin这个属性。

二、一些具体问题怎么去解决

可能在一些实际的开发中,你遇到的一些问题,别人没遇到,别人遇到的一些问题。尤其是在我们刚学会网页制作的时候,在项目开发时遇到一些棘手的问题,不知道该怎么去解决它。我认为:可以通过百度上寻找答案,和一些从事这个行业的人进行交流探讨。可能会在某个不经意的瞬间,激发你解决问题的灵感来。

在这次项目实战中,同样我也遇到了这样的一个问题:那就是帮客户做的网站中,有个联系客服的模块,需要定位在浏览器的右边,并且要随着浏览器的下拉条的拉动,位置不发生变化。通常我们都会写为:position:fixed;top:230px;right:0;就可以省事了,但测试IE的时候,发现一个问题,那就是这个CSS代码不起作用。然后通过上百度查询资料才知道。原理IE不支持position:fixed(相对于浏览器来定位),只支持position:absolute这个属性。

客服联系

 最终解决代码:position:fixed;top:230px;right:0; _position:absolute;top:230px;right:0;

可能很多人,对于上面_position不是很理解。在这里我简单的解释一下:这是一种CSS hack写法。通过CSS hack来解决浏览器的兼容问题。那么又有人会问?什么是 CSS hack呢?

简单点说:就是针对不同的浏览器写不同的CSS 代码的过程,就叫CSS hack。

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识等等。HTML头部引用(if IE)Hack:针对所有IE:,针对IE6及以下版本:,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

比如说:我们要分辨IE6和firefox两种浏览器,可以这样写:

div{background:green;

*background:red;

}

我们在IE6中看到是红色的,在firefox中看到是绿色的。因为firefox是不识别*,所以只会执行第一条CSS。但在IE6中两者都能识别,但是后者的优先级比前者高,所以就会执行第二条CSS。

值得注意的是:IE都能识别*;标准浏览器(如firefox)不能识别*;

 IE6能识别*;不能识别 !important;

 IE7能识别*,能识别!important;

 firefox不能识别*,但能识别!important;

总结:我觉得不管学什么和做什么事情,都要讲究一个方法,这样才会起到一个事半功倍的效果!遇到问题一定学会怎么去解决。我认为学东西,不只是学某个东西是怎么做出来的,一个要弄清楚里面的实现原理以及方法。只有这样去学习,自己的能力才会得到提升。

实战网站:上海福宽医药科技有限公司

本文由段亮博客原创,如需转载请注明出处:

本文出处:http://www.duanliang920.com/learn/web/sz/255.html

如果您觉得文章对你有帮助,可以进行打赏。
打赏多少,您高兴就行,谢谢您对段亮这小子的支持! ~(@^_^@)~

微信扫一扫 微信打赏

支付宝扫一扫 支付宝打赏

上一篇:网站项目实战开发(-)
下一篇:没有了
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客