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向左偏移就可以了,这样还是可以兼容的情况下完成完美定位。
相关文档:
转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一
般我们不直接调用它们。
那么Magento应用又是如何引用CSS文件的呢 ......
当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
<input type="text" /> 文本框
<input type="p ......
W3School:http://www.w3school.com.cn/css/index.asp
英文版网址:http://www.w3schools.com/css/default.asp
作为初学者,这是一定要收藏的网站。这就相当于一本CSS入门教程,在此可以学习每个标签,属性的用法和实例,可以自动动手实践代码。除了CSS的知识,这个网站还包括了大量其他网页开发语言教程和其他知识。
CSS ......
下面是CSS最常用和实用的技巧。
1.重置浏览器的字体大小
重置浏览器的默认值 ,然后重设浏览器
的字体大小你可以使用雅虎的用户界面重置
的CSS方案 ,如果你不想下载9MB的文件,代码如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,
blockquote,th,td ......
1.一个很好的Appfuse学习论坛:http://n4.nabble.com/AppFuse-f547863.html
2.Appfuse CSS的开发https://appfuse-css.dev.java.net/
3.CSS样式的查看,CSS Framework Themes: http://css.appfuse.org/themes/
4.CSS 样式的下载http://issues.appfuse.org/browse/CSS-13
个人感觉比较好的两个CSS style
http://css.appfu ......