随笔分类 -  CSS

Making IE use PNG Alpha transparency
摘要：DeprecatedThis fix is deprecated and is no longer supported (meaning that I will not help you to get it working with your pages). It was only written to fill the gap while waiting for Internet Explorer to implement PNG alpha. That has now happened in IE 7. Although this fix can make it work in IE 6 阅读全文
posted @ 2011-03-10 19:12 zzh 阅读(281) 评论(0) 推荐(0)
关于div高度自适应问题，兼容IE和火狐
摘要：在此，并不是指div的高度可以简单的自动调整。而是指在该div中没有置放内容的情况下，至少要保持这个div的高度为多少，而有内容的时候，又会随着内容的多少而自动调整。同时，对IE或是FF等浏览都可以兼容的。举个实例： div要求至少高度需要200px。也就是说，即使div中没有任何内容，高度也需要保持在200px；当DIV中的内容高度超过200px时，则该div会自动调节高度，而且又兼容各浏览嚣。怎么解决呢？ 对于初学者来说，可能想到的就是min-height:200px这个和height:auto这样的写法了。虽然这样写法用IE浏览器浏览是正常的，可是如果用火狐浏览嚣一测试一下，就知道不兼容 阅读全文
posted @ 2011-03-02 16:43 zzh 阅读(506) 评论(0) 推荐(0)
input style兼容IE6的方案
摘要：FF与IE7下input type="text" 和 input type="password"输入框的长度都是一样的，但在IE6下偏偏前面的长后面的短2px，设置size也不行，而设置width可以，但为了不影响其他input(如type=submit)的width，我们可以这样写css: Java 代码 input[type="text"],input[type="password"]{wid... 阅读全文
posted @ 2010-04-07 17:17 zzh 阅读(346) 评论(0) 推荐(0)
IE上关于PNG做背景,层上超链接不能点击的解决办法
摘要：CSS代码:引用<style type="text/css">.pngbg{background:url(menubarbg.png) no-repeat;}.pnglink{height:145px;width:232px;}#area{left:20px;top:20px;position:relative}</style><!--[if lt IE 7]>... 阅读全文
posted @ 2009-11-24 17:45 zzh 阅读(670) 评论(0) 推荐(0)
被遮挡的绝对定位
摘要：A (relative) B (relative) 最近做minisite项目时，碰到了个奇怪的定位问题: 以上的A，B两个盒子是相对定位, 标牌logo是A的子级，基于A做绝对定位 问题描述：我们希望标牌logo显示在最上面，但在IE下logo标牌部分被B区域遮住,B在最上层显示，调整logo的z-index的数值调整无效，firefox下显示正常。 解决方案：先了解一下所涉及到的几个定... 阅读全文
posted @ 2009-02-17 14:29 zzh 阅读(2768) 评论(1) 推荐(0)
Ie6不支持Png的解决办法
摘要：例子在下面压缩包里 IePngFix 阅读全文
posted @ 2008-12-26 17:38 zzh 阅读(427) 评论(0) 推荐(0)
用CSS控制输入框input悬停交互样式
摘要：制作表单的时候，实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout 脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码 增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。 2、在xhtml中加入小脚本... 阅读全文
posted @ 2008-12-22 13:51 zzh 阅读(445) 评论(0) 推荐(0)
html后缀改成.aspx后 在ie6下变形错位的问题
摘要：初学div+css，在做作的过程中遇到了这个问题？ 这两个页面代码完全一样 ，就是后缀不一样，前者在ie6下变形错位，ie7、ff2下正常；后者在各浏览器中显示都正常； 这种问题一般是怎么引起的呢？ 只要你原先做的html+css没有问题的话，改为aspx后，.net环境在编译后让html的编码格式改为了utf-8。而你的css文件没有进行相应的变更就会出现css失效的问题。... 阅读全文
posted @ 2008-12-18 16:05 zzh 阅读(428) 评论(0) 推荐(0)
z-index在IE中的迷惑
摘要：z-index 属性简介 z-index : auto | number auto: 默认值。 number: 无单位的整数值，可为负数 。 z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。 注意：这个属性不会作用于窗口控件，如 select 对象。在IE5... 阅读全文
posted @ 2008-12-18 12:25 zzh 阅读(360) 评论(0) 推荐(0)
设置span的宽度，让span象button那样显示
摘要：在html中如何设定span的宽度？这看上去是个很简单的问题，似乎用style中的width属性就可以。例如， Test Span fixed width span 通过试验以后发现，无效，无论是在Firefox还是IE中都无效。 通过查阅CSS2标准中关于width的定义发现，原来CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Fir... 阅读全文
posted @ 2008-12-03 17:26 zzh 阅读(628) 评论(0) 推荐(0)
最佳网页宽度及其实现
摘要：1. 设计网页的时候，确定宽度是一件很苦恼的事。 以minifun.cn为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。最小的分辨率是122x160，这应该是手机；最大的分辨率是3360x1050，天知道是什么设备。 一张网页要在大小如此悬殊的各种屏幕上，都呈现令人满意的效果，难度可想而知。举例来说，一张400px宽的图片，在800px的屏幕上会占... 阅读全文
posted @ 2008-12-01 17:09 zzh 阅读(346) 评论(0) 推荐(0)
ie6 overflow:auto不起作用的情况
摘要：今天遇到一个比较特殊的情况：ie6下设置overflow:auto不起作用，在火狐下正常显示。ie下滚动条是出来了，但是内容却跑到下面去了，滚动 条行同虚设。网上搜索了一下都说是设置高度和宽度就ok了，开始还以为是百分比高度引起的，但设置成绝对高度200px后还是不行。最后通过经验判断出原 来是overflow的那个div没有position定位，给加了个定位和top,left属性后一切都正常了！... 阅读全文
posted @ 2008-11-12 16:19 zzh 阅读(3328) 评论(2) 推荐(0)
使用负边距创建自适应宽度的流体布局
摘要：1# 大 中 小 发表于 2008-5-20 07:47 文章来源：http://www.osmn00.com/?p=24 合理使用负边距技术，可以帮助我们创建很多有意思的布局，比如自适应浏览器宽度的流体布局。国外关于使用负边距创建这类布局的技术文档，我看到的最早是04年 Ryan B... 阅读全文
posted @ 2008-10-13 11:46 zzh 阅读(801) 评论(0) 推荐(0)
IE6 / IE7 / Firefox 的margin问题解决办法
摘要：这两天在做一个网站的布局，因为经常用firefox，所有的内容都是在firefox下面调试的，等快完工了切回IE7一看，样式差别好多，主要是在margin，padding这几个元素的理解上。 我知道ie6 ie7 firefox 对margin的解释都不同，去网上查了一下，可以通过!important这样的手段hack。 具体的做法有以下几种： 第一种： .div { backgroun... 阅读全文
posted @ 2008-09-03 19:34 zzh 阅读(1743) 评论(1) 推荐(0)
IE FireFox对CSS的不同解释收集
摘要：W3C说是一个标准,不如说是一个麻烦,FireFox大家都说好用,但我宁愿它没有!! 苦了这些程序员,哎! 以下细节只针对IE和FireFox，其它浏览器并未测试 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设... 阅读全文
posted @ 2008-08-11 14:52 zzh 阅读(312) 评论(0) 推荐(0)
透明PNG背景图片 For IE 6.0 Firefox Opera
摘要：PNG图片在网页设计中扮演着一个很重要的角色，利用PNG图片的特点可以制作出实用,绚丽的效果，可是对于PNG图片的支持却不是很理 想，Firefox和Opera对PNG支持的比较好，特别是Firefox浏览器。可是IE却不理PNG,使得设计者无法很随意的使用png图片。 IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Netw... 阅读全文
posted @ 2008-07-22 20:16 zzh 阅读(1426) 评论(0) 推荐(0)
FIREFOX层的自适应高度
摘要：在IE下很容易实现高度的自适应，但在FF下如果DIV层里包含的是层，而不是直接填充内容的话，是不会自动适应高度的，这在我们设置背景层时经常用到的，下面是一个例子： container作为最外层，在IE下可以自适应，但在FF下就只有main层与sidebar层可以，苦思良久，也问了许多朋友，最后还是从网上搜到答案，很简单： 只需定义#container { display:table}... 阅读全文
posted @ 2008-07-16 20:28 zzh 阅读(344) 评论(0) 推荐(0)