网站项目实战开发(二)

  • 编辑时间: 2014-07-25 10:40:00
  • 浏览量: 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

阿里云服务器优惠

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

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

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

站长推荐
loading... 数据加载中...

超低服务器价格,值得购买!

超低服务器价格,值得购买!