各种CSS bug与技巧
来源:互联网 发布:网络七层协议及功能 编辑:程序博客网 时间:2024/09/21 09:22
1、容器不扩展问题
这个是经常在我切图的时候遇到的问题,如:
提示:你可以先修改部分代码再运行。
解决办法:在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决,其实这个是错误办法。太增加代码量了
2、margin双边距问题
提示:你可以先修改部分代码再运行。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决办法是在这个div里面加上display:inline;
ps:我一般很少用margin,一般情况用padding来控制边距,以免出现另外的bug
3、关于容器的包涵关系
很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事
5、最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
- .tabd1{
- background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
- background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是,一定要将xxxx !important 这句放置在另一句之上。
6、IE6躲猫猫bug
提示:你可以先修改部分代码再运行。
下面方法的任意一种即可消灭bug:
1.明确的指定最外面div容器(#holder)的宽度(相对宽度和绝对宽带都可以)。
2.去掉最外面div容器(#holder)的背景颜色(或者背景图片)
3.缩小浮动div容器(#floater)的高度到一定程度
4.不浮动div容器(#floater)
5.不使用
技术
7、ie6下空标签高度问题
一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
<div class="c"></div>
运行:
提示:你可以先修改部分代码再运行。
如果不让它默认为19PX。而是0PX的话
解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释,
3.css里面加上line-height:0;然后div里面加上#nbsp;,
注意:ie6下给div设置的高度小于ie6的line-height值时,ie6会将这个div的高度定为line-height的值.
8、去掉图片热点链接或超链接的虚线框
9、按钮按下时立体感效果:
10、整站变灰代码(加到样式表中):
11、中英文下划线对齐方式(利用图片的align=”absmiddle”):
12、设为首页代码:
13、加入收藏代码:
- <script>
- function addfavorite()
- {
- if (document.all)
- {
- window.external.addFavorite(’http://bbs.blueidea.com’,'经典论坛’);
- }
- else if (window.sidebar)
- {
- window.sidebar.addPanel(’经典论坛’, ‘http://bbs.blueidea.com’, "");
- }
- }
- </script>
- <a href="#" onclick="addfavorite()">把经典论坛加入收藏</a>
14、通过定义em实现小三角效果:
- * {
- font-size:14px;/* 必须通配字体大小 */
- }
- em {
- display:block;
- font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
- border:7px solid;/* border值越大,三角形越大 */
- border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
- margin-top:5px
- }
15、IE6下当层高低于10px时,会出现高度在定义值上加10px的效果,最简单的方法就是在该层样式中加入:
16、空div在IE(FF中没有)是有默认高度的,可以用定义:
17、描边文字效果:
- <div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
- 这是描边文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">这是描边文字</span>
- </div>
18、input鼠标经过时改变颜色:
19、图片在容器里垂直居中显示:
20、超链接访问过后hover样式就不出现的问题:
提示:你可以先修改部分代码再运行。
ps:被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
21、FF下如何使连续长字段自动换行:
提示:你可以先修改部分代码再运行。
ps:众所周知IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入的方法来解决
22、IE6下为什么图片下方有空隙产生:
提示:你可以先修改部分代码再运行。
ps:解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
23、 IE6下这两个层中间怎么有间隙:
提示:你可以先修改部分代码再运行。
ps:这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
24、list-style-image无法准确定位的问题:
提示:你可以先修改部分代码再运行。
ps:这个list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决
25、web标准中定义id与class有什么区别吗:
提示:你可以先修改部分代码再运行。
ps:一.
web标准中是不容许重复ID的,比如 div id=”aa” 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.
属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.
方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
26、如何对齐文本与文本输入筐:
提示:你可以先修改部分代码再运行。
ps:遇到此种问题,设置文本框的vertical-align:middle 就可以了
27、为什么web标准中IE无法设置滚动条颜色了:
提示:你可以先修改部分代码再运行。
ps:解决办法是将body换成html
28、怎么样才能让层显示在FLASH之上呢:
提示:你可以先修改部分代码再运行。
ps:解决的办法是给FLASH设置透明
29、怎样使一个层垂直居中于浏览器中:
提示:你可以先修改部分代码再运行。
ps:这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
- 各种CSS bug与技巧
- 各种CSS bug与技巧
- 最常用的12种CSS BUG解决方法与技巧
- 最常用的12种CSS BUG解决方法与技巧
- CSS各种小技巧
- 各种浏览器CSS hack方法与技巧收集
- 各种css hack以及bug解决方法
- 各种主流浏览器CSS、BUG兼容-
- 最常用的10种CSS BUG解决方法与技巧-浏览器兼容教程
- 最常用的9种CSS BUG解决方法与技巧 – 各大浏览器兼容
- css技巧与经验
- CSS布局奇葩技巧之--各种居中
- CSS布局技巧之--各种居中
- CSS布局技巧之--各种居中
- CSS布局技巧之--各种居中
- CSS布局技巧之–各种居中
- 各种主流浏览器CSS、BUG兼容(附带解决方法~、)
- CSS技巧杂谈 在css中遇到的各种状况
- grub 引导文件配置
- Tomcat6 JBPM4 jar包冲突问题
- 大数库
- 代码破解Myeclipse7.5
- flex 图片展示效果
- 各种CSS bug与技巧
- aix下新建实例和手动创建数据库
- 做一个类似操作系统的资源管理器的小东东,双击ListView项可以浏览文件夹,打开文件
- 用.xsd (数据集)生成数据层(DAL)代码
- 2005年11月1日 歌曲:中产阶级
- 从Execl导入数据返回DataTable
- try...catch...finally java String 的用法
- 这段发c#邮件的代码怎么在自己机器上调试时怎么经常发送不了邮件啊
- dbstart 报错 Failed to auto-start Oracle Net Listene using /ade/vikrkuma_new/oracle/bin/tnslsnr