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. 24种设计模式--门面模式【Facade Pattern】

    大家都写过纸质的信件吧,比如给女朋友写情书什么的,写信的过程大家都还记得吧,先写信的内容,然后写信封,把信放到信封中,封好,投递到信箱中进行邮递,这个过程还是比较简单的,虽然简单,这四个步骤都是要跑的 ...

  2. gridview列前加复选框需要注意的一点

    前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gr ...

  3. 配置nginx1.7.8支持pathinfo模式

    vi nginx/conf/nginx.conf 1.修改正则 set $real_script_name $fastcgi_script_name; if ($fastcgi_script_name ...

  4. WPF学习之路初识

    WPF学习之路初识   WPF 介绍 .NET Framework 4 .NET Framework 3.5 .NET Framework 3.0 Windows Presentation Found ...

  5. wndows 7 Wifi热点

    2016年09月13日 14時52分 wanglinqiang整理 Step1 cmd.exe(管理员身份运行) Step2 命令行输入[netsh wlan set hostednetwork mo ...

  6. 什么是image crop？

    一直对image crop很困惑,总算是看到了一篇描述较为简洁的说明:图像crop就是指从图像中移除不需要的信息,只保留需要的部分

  7. Application+Handle+Task

    Application Application和Activity,Service一样,是android框架的一个系统组件,android系统会为每个程序运行时创建一个Application类的对象且仅 ...

  8. jQuery实现Twitter的自动文字补齐特效

    上图效果可以使用jQuery插件Typeahead.js来实现,这款jQuery插件来自于Twitter的一个新的项目,支持远程和本地的数据集.比较有特色的地方在于你可以将数据集使用本地存储(loca ...

  9. The Lost Art of C Structure Packing

    对齐要求 首先需要了解的是,对于现代处理器,C编译器在内存中放置基本C数据类型的方式受到约束,以令内存的访问速度更快. 在x86或ARM处理器中,基本C数据类型通常并不存储于内存中的随机字节地址.实际 ...

  10. BZOJ 3122 随机数生成器

    http://www.lydsy.com/JudgeOnline/problem.php?id=3122 题意:给出p,a,b,x1,t 已知xn=a*xn-1+b%p,求最小的n令xn=t 首先,若 ...