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程序，以后忘记了可以到这里下载。

　　　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('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;}//FF下面
css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以
前面url是自定义鼠标格式，图像的绝对路径地址，后面的参数是css标准的cursor样式，（IE下面可以不需要）
图标的格式根据不同的浏览器来分：IE支持cur,ani,ico这三种格式，FF支持bmp,gif,jpg,cur,ico这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将图片存为cur或ico格式比较好，如果是ani格式的话，那么可以在FF下面用jpg,gif,bmp来代替(cursor:url(.....ani),url(.....gif),auto)
还有几个需要注意的地方：1.图片地址为绝对路径，2.图片大小最好是32*32的大小，反正在各个浏览器下面解析的大小不一样
 
10、今天碰到一个奇怪的问题，google，IE浏览器下这段代码：

                    <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开发经验&错误习惯的更多相关文章

  1. CSS下拉列表错误纠正

    上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...

  2. Div+CSS常见错误总结

    CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用cs ...

  3. iis 7.5 0x80004005 静态文件 html、js、css 500错误

    环境:iis 7.5 win7 64位 vs2012 问题:本地环境F5直接运行,没有任何问题,发布到IIS,静态文件不能访问,出现500错误,网上找了一堆解决办法,排除路径不正确,iis全部功能勾了 ...

  4. CSS开发经验

    1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给 ...

  5. cube打包后css顺序错误

    先说下解决办法: 把import {...} from cube-ui放在 import App from './App.vue'的前面 不然会产生如下错误 正确的顺序

  6. html,css样式错误总结

    a元素不能嵌套a元素 a元素嵌套a元素会使a元素闭合出现混乱,导致浏览器识别出多个a元素.

  7. IIS 图片 JS CSS 500错误

    1.检查站点MIME类型是否可以正常加载

  8. CSS基础 CSS常见错误排错思路

  9. 有利于SEO优化的DIV+CSS的命名规则小结

    可以先去这里温习一下CSS和HTML的知识!DIV+CSS规范命名大全集合  CSS开发技巧整理 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css/master.css ...

随机推荐

  1. Maven项目的目录结构

    刚接触Maven没多长时间,实习时在的小公司很不规范,所有web项目都是dynamic web project搭建,没有用到项目构建,管理工具,导致了非常多的重复工作与低效. 先来看看Maven的功能 ...

  2. winfrom中按钮文本&的显示问题/按钮快捷键设置问题

    其实这个问题是因为“&”有特殊的意义-就是可以作为快捷键 第一种:Alt + *(按钮快捷键) 在大家给button.label.menuStrip等控件设置Text属性时在名字后边加& ...

  3. javascript闭包传参和事件的循环绑定

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. <a href="#">text</a><br>< ...

  4. EQueue 2.3.2

    EQueue 2.3.2版本发布(支持高可用) 前言 前段时间针对EQueue的完善终于告一段落了,实在值得庆祝,自己的付出和坚持总算有了成果.这次新版本主要为EQueue实现了集群功能,基本实现了B ...

  5. scrollView and tableView

    As we all know, tableView is the subclass of scrollView,  tableView has every properties that scroll ...

  6. base64的一个应用情景

    AddActivity.xml rushrank.xml 不过AddActivity.xml不也是通过二进制流就传过去了吗?      事实上是可以的,只要不将这些二进制的数据写下来,传播是可以的,只 ...

  7. iOS: Core Data入门

    Core Data是ORM框架,很像.NET框架中的EntityFramework.使用的基本步骤是: 在项目属性里引入CoreData.framework (标准库) 在项目中新建DataModel ...

  8. Python如何读取指定文件夹下的所有图像

    (1)数据准备 数据集介绍: 数据集中存放的是1223幅图像,其中756个负样本(图像名称为0.1~0.756),458个正样本(图像名称为1.1~1.458),其中:"."前的标 ...

  9. PC硬件之我见——CPU篇

    写在最前面:     最近身边很多朋友都购置电脑的想法,往往也会选择性价比较高的DIY攒机方式.不幸的是,并不是所有人都对电脑硬件有一定的了解的,何况在现在这种社会风气下,盲目的相信商家是不明智的.所 ...

  10. sleep与wait的区别，详细解答（通过代码验证）

    package com.ysq.test; /** * sleep与wait的区别: * @author ysq * */ public class SleepAndWait { public sta ...