css开发经验&错误习惯
1.尽量用class来定义样式。尽量少使用 .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给ul加个class如<ul class="ul1"></ul>这样来写。
2.margin:0px auto; 用于兼容不同分辨率的内容居中设置。
3.分享一个非常好用的CSS图片合并网站,他能够将用户上传的图片一次合并成为一张大图片,同时还能够生成每张图片的背景位置,对于减少HTTP请求非常有用。
http://cn.spritegen.website-performance.org/
4.如果用了float:left;那么能用float:left就一直用float:left。否则左右不定,当HTML结构不合理时很麻烦。
5.绝对定位,要尽量找到离它最近的父元素作为定位基准,这样能更好地兼容分辨率等问题。而且浏览器移动也不会漂移。
6.今天解决了一个美化一个file表单元素的美化问题,真可谓是问题多多,特此做个记录。
按照公司的要求,上传表单要设计成只有一个按钮,不能够显示前面的文本框。
尝试过将<input type=file>隐藏,然后通过一个div的单击事件触发file的单击事件,这样虽然file表单元素是能够获取到路径,但是提交的时候,IE死活不让提交,但是将file元素显示之后,点击浏览按钮选择的路径却能够提交。因此得出一个未经严格验证的结论。IE下的file表单元素,一定要通过鼠标真正点击浏览按钮选择到的路径才会提交表单。因此此方法我废弃了。
既然你IE一定要鼠标真正点击才能够提交表单吗?OK,那我就把input file设置为透明的,盖在背景图上面,然后通过字体调整后面浏览按钮的大小,调到浏览按钮的大小刚刚好覆盖住背景图片,这样就完美了。代码不粘贴上来了,仅仅上传个DEMO程序,以后忘记了可以到这里下载。
7、z-index说明。
在IE中,对于定位元素,不是单纯的比z-index谁大谁小,还要比其父元素的大小。此图从园子里一个牛人处拷来。原本地址是:http://www.cnblogs.com/Darren_code/archive/2012/03/05/z-index.html,可以看到在IE中,是先比较了父元素的z-index,然后再比较同一父元素下的子元素。图片已经说明得很清楚。只要自己的父元素z-index不够大, 无论自己的z-index再大,也不会盖过其他父元素比它高的元素的子元素。
8、在布局时,不要定好了宽度,再来处理什么padding,border,margin之类的。因为定好了宽度,如果按照这个宽度再来添加padding,border,margin,实际上这个盒子占用的距离为padding + border + margin + content。
9、Cursot自定义光标注意的问题
css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以

- <td width="120px">
- <a>xxx</a>
- </td>
- <td>
- <a>xxx</a>
- </td>
- <td width="50px">
- <a>xxx</a>
</td>

本来是3个td,某一天,突然中间那个加了个很长的a内容,结果在google里就把整个table都撑大了。
后来在中间的td加了个 style="word-break:break-all;" 就搞定了。
11、IE7下滤镜的问题:
先来看下面这一段代码在IE7下面与谷歌浏览器下的区别:

- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- </head>
- <body>
- <div style="margin-top:300px; margin-left:300px; position:fixed; width:200px; height:200px;">
- <div style=" position:relative; width:160px; height:160px; opacity: 0.9; filter:alpha(opacity=90);">
- <div style=" position:absolute; left:-50px; top:-50px; width:100px; height:100px;"></div>
- </div>
- </div>
- </body>
- </html>

先来看谷歌的表现:
IE7的表现:
这里主要的问题就是,当一个DIV设置了 filter:alpha(opacity=90);属性之后,在IE7下,所有超越该DIV边界的东西都会自动隐藏。暂时我还没有找到办法解决。
但是有绕道方案:
1、将要跨界显示的内容,移到设置了filter的DIV之外,再用相对偏移量移到适当位置。
2、加这一句代码 *filter:; 在IE7下不启用透明效果。对其他浏览器没影响。
12、dispaly:none与visibility: hidden的区别
dispaly:none; CSS1隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间。
visibility: hidden;设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间。如果希望对象为可视,其父对象也必须是可视。
作者: | 逆心 |
出处: | http://www.cnblogs.com/kissdodog/archive/2012/12/04/2801162.html |
css开发经验&错误习惯的更多相关文章
- CSS下拉列表错误纠正
上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...
- Div+CSS常见错误总结
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用cs ...
- iis 7.5 0x80004005 静态文件 html、js、css 500错误
环境:iis 7.5 win7 64位 vs2012 问题:本地环境F5直接运行,没有任何问题,发布到IIS,静态文件不能访问,出现500错误,网上找了一堆解决办法,排除路径不正确,iis全部功能勾了 ...
- CSS开发经验
1.尽量用class来定义样式.尽量少使用 .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给 ...
- cube打包后css顺序错误
先说下解决办法: 把import {...} from cube-ui放在 import App from './App.vue'的前面 不然会产生如下错误 正确的顺序
- html,css样式错误总结
a元素不能嵌套a元素 a元素嵌套a元素会使a元素闭合出现混乱,导致浏览器识别出多个a元素.
- IIS 图片 JS CSS 500错误
1.检查站点MIME类型是否可以正常加载
- CSS基础 CSS常见错误排错思路
- 有利于SEO优化的DIV+CSS的命名规则小结
可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合 CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...
随机推荐
- 【实习记】2014-08-20实习的mini项目总结
实习项目总结文档 项目介绍 项目逻辑很简单,只有几个页面,只能登录,查看,支付和退款.主要作用是熟悉C++的cgi的web服务开发方式. 项目页面截图 图一:登录页面 图二:买家查看 图三:买 ...
- PreResultListener使用
PreResultListener是一个监听器接口,可以在Action处理完之后,系统转入实际视图前被回调. Struts2应用可以给Action.拦截器添加PreResultListener监听器, ...
- marquee标签制作轮播图
http://qy-0824.blog.163.com/blog/static/725075422011214142226/ 缺点是仅能控制轮播的速度.鼠标悬停暂停等,并不能给其指定链接.触摸滑动.分 ...
- Hibernate 使用说明
Eclipse中hibernate连接mySQL数据库练习(采用的是hibernate中XML配置方式连接数据库,以后在更新其他方式的连接) Hibernate就是Java后台数据库持久层的框架,也是 ...
- 用MFC如何高效地绘图
显示图形如何避免闪烁,如何提高显示效率是问得比较多的问题.而且多数人认为MFC的绘图函数效率很低,总是想寻求其它的解决方案. MFC的绘图效率的确不高但也不差,而且它的绘图函数使用非常简单,只 ...
- python 连 mongodb
这几天在学习Python Web开发,于是做准备做一个博客来练练手,当然,只是练手的,博客界有WordPress这样的好玩意儿,何必还自己造车呢?决定使用Tornado这个框架,然后数据库方面决定顺便 ...
- C51应用 Modbs Rtu协议实现与KEPServerEx 通信
最近一客户要求使用STC12C5A60S2实现Modbus Rtu协议与KEPServerEx V4.0软件通信,采集单片机P2口每位的状态,设置P0口每位的状态,实现三路AD转换其中一路采集的是C0 ...
- 利用Anaconda安装python后,如何安装opencv-python
利用Anaconda安装python后,想要安装opencv-python,但发现利用opencv-python的官方教程,没法实现opencv的安装 还好看到了另外一篇博客的方法,试一下,果然凑效 ...
- php pdo和mysqli对比选择
1)总的比较 PDO MySQLi 数据库支持 12种不同的数据库支持 支持MySQL API OOP OOP + 过程 Connection Easy Easy 命名参数 支持 不支持 对象映射 ...
- 《Journey》风之旅人;
俩个人在茫茫世界相遇,互不相识,却能互相取暖,一路旅程,看尽了美丽的风景,也共同经历了暴风雪,然而该来的人会来,该走的人会走,这不就是人生旅途?