|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
所有的设计第一步就是构思,构思好了。
破洛洛文章简介:这里要会商的是比来在项目上对z-index在ie6下本人的一个熟悉,但愿能匡助在z-index兼容上碰到成绩的偕行一个参考。
z-index这个属性实在在挺多中央城市用到,在百度上搜刮也有大批关于z-index的篇幅往论述这个属性,出格是在ie6下的z-index处置有更多的相干文章,本文就不再环绕z-index这一属性的基本睁开叙说。这里要会商的是比来在项目上对z-index在ie6下本人的一个熟悉,但愿能匡助在z-index兼容上碰到成绩的偕行一个参考。
起首是demo,点击就能够看到相干的demo了,这个demo就是一个分类导航的模块,完成的功效是鼠标经由时以后标签切换背景和弹出相干层,代码的布局优劣不做进一步切磋。我们持续来看z-index这个器材。
起首我是如许处置,一切a标签z-index都为10,经由弹出层z-index为20,以后a标签z-index为30,如许在chrome、firefox、ie98都到达了预期的效果(设置z-index的历程固然要特地设置position这个器材,假如你有先看过网上的文章也会晓得。)
在初次完成后ie67其实不兼容,也就是你如今所看到的demo(你能够放到ie67里看看),经由弹出层被其他a标签遮住了。依照平常的常规按照直觉z-index:9999;position:relative;zoom:1林林总总的属性都用上了,这个层仍是逝世逝世的躺在其他a标签上面。
没举措,看来乱碰撞不克不及办理成绩,只能用感性往剥开ie6下z-index的沉溺缘故原由。据我所知(不晓得甚么时分记着的)ie6下的z-index对照是看他们的老迈(父级)的比拼,也就是说谁的老迈初级(z-index),常常它们也就随着上位了。
按着方才形貌的逻辑往思索这个demo在ie67下的成绩,今朝一切a标签都是同级(z-index:10;),也就是说一切堂口的老迈都是10级的,他们的小弟一定不会年夜过他们,如许想来难怪经由弹出层在其他a上面了,鉴于这类情形,我只能把以后a标签的老迈li再进步一个级别,使鼠标经由确当前a标签和弹出层全体进步一个层次,如许就不会给其他a标签遮住了。
关于ie6/7下的z-index说究竟实在就是拼爹,谁的爹年夜谁就在下面(年夜部分云云,不扫除其他情形)。假如你没有失掉谜底我会在收到一条批评后公然~最初再增补一句,尼玛的ie6!!</p>
Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。 |
|