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向左偏移就可以了,这样还是可以兼容的情况下完成完美定位。
相关文档:
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{bord ......
转载于 罗马集市
Magento的CSS文件一般存放到 $MAGENTO_INSTALLED_FOLDER/skin/{frontend | admin |
install}/<package name>/<theme
name>/css目录下。也有些和全局js脚本配合使用的css文件存放在$MAGENTO_INSTALLED_FOLDER/js下,但是一
般我们不直接调用它们。
那么Magento应用又是如何引用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 ......
让treeview不显示td网格线 gridview显示网格线
HTML
<style type="text/css">
TD
{
font-size: 9pt;
  ......
平时自己搜集了一些css的模板下载网站
现在分享给大家
第一个是openwebdesign
这个网站提供了超多的而且是免费的符合标准的css模板,以前我在百度空间
搭建博客的时候,就是经常在这里找一些喜欢的css模板,然后根据其样式
模仿
第二个是Dark eye
这个也是提供了免费的css模板,数量也很多,比较喜欢的是他可以更具颜色来 ......