css的position relative兼容问题与解决办法
position:relative在css设计中有着居住轻重的作用,如果你还没有用过它那么真是巨大的遗憾,以前做过div title提示框的时候有个箭头定位问题,当时的解决办法就是多套用一层div并且留白一定大小,用来背景显示箭头,但是发现箭头永远在下面,没有办法遮盖
主体融合的部分
,所以效果也就不好,当然,聪明的您可能已经有更好的解决办法了,用position:absloute又不能完全解决问题,每次要定位实在是一件麻烦的事情,分辨率调整等等都要重新计算,也影响性能,position:relative就是一个最好的解决办法,至于用法很简单,网上很多,在此就不再累述。
但是实际使用中发现一个兼容性的问题,position:relative是指针对上级目录的相对决定定位,他是浮动在页面上的,但是相对父级是占有空间的,实验证明他们的top属性针对的对象不一致:firefox chome IE7、8等不会出问题,就是针对他的直接parent y坐标定位,但是遨游、腾讯等ie内核的包装浏览器就会不一样,他们针对的是书写位置的上一个直接对象,这样做出来的浮动层在浏览器下就不兼容了,y坐标不统一(估计IE6也会有这样的问题,没有测过)
。有人可能说这些非主流浏览器还顾及他们干什么,须不知国内有多少用户使用的是包装ie内核的浏览器,而非ie本身,做程序的不能存在这种侥幸心理。
看清楚问题所在解决办法就很简单了,将需要relative的元素插在parent元素的最前面,这样就css统一了,如果你是用的是jquery的话,那么prepend就是干这个的,很方便。
但是这样做又有一个新的问题,正因为元素是相对绝对定位的(对于父页面相对,而且占有空间,对于父的兄弟是绝对的,可以覆盖),所以
relative后面的部分会被推挤下去,这样虽然标准统一了,但是这个位置还是会让布局变形。
可以这样解决:比如有如下一个
relative定位层:<div class='Lodding'></div>,Lodding
定位是relative的,可以在他外面再套嵌一层div:
<div style='float:left;'>
<div class='Lodding'></div>
</div>
然后再把这一块附加到需要覆盖定位的文档内部最后边,再用top属性向上或者left向左偏移就可以了,这样还是可以兼容的情况下完成完美定位。
相关文档:
1,无图片纯css圆角框
收录理由:兼容性强,不用图形
图一
特点:
1.不用任何图形,使用很多个div容器模拟出圆角效果。
2.兼容性:通杀所有浏览器
缺点:
1.构造这个圆角需要加入太多的无语义的标签,结构比较冗余。
2.重用性不强:如果一个页面有多个圆角,并且要实现不同的半径大小,则其灵活性不够。
3.边框颜 ......
Data visualization is mostly achieved with flash applications or
with help of some programming languages. Are those solutions the only
way to present, let's say simple data chart? How about giving it a try
with nothing but good ol' css?
Take a look at the Demo
| Download Css Chart
Approach
......
W3School:http://www.w3school.com.cn/css/index.asp
英文版网址:http://www.w3schools.com/css/default.asp
作为初学者,这是一定要收藏的网站。这就相当于一本CSS入门教程,在此可以学习每个标签,属性的用法和实例,可以自动动手实践代码。除了CSS的知识,这个网站还包括了大量其他网页开发语言教程和其他知识。
CSS ......
最近的面试中总是问我一些浏览器兼容性问题,所以下面做一个总结:
为什么会出现这种现象呢?主要就是像Firefox这样浏览器良好支持W3C标准,是目前对CSS支持最好的浏览器,而ie是出现的比较早,在w3c支持方面做的一直不是很好。有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显 ......
使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行,不过个 ......