标签归档：css
版本8以下的IE都不支持CSS的inherit属性
今天在页面中使用了code这个标签，但在页面中看到它所使用的字体仍然是浏览器默认的，而不是它的父元素定义的，于是就直接用下面的CSS代码，想直接继承它的父元素的字体样式： code{ font-family:inherit; } 在火狐上看code已经继承了父元素的字体样式，便屁颠屁颠地提交了。但老大一看，说样式仍然不对，我有点吃惊，用IE一看，果然code用的仍然是浏览器默认的字体样式，而并没有继承父元素的字体样式，但在火狐里已经实现了继承。 这下我傻眼了，赶紧问Google，一问才知道：版本8以下的IE都不支持CSS的inherit属性！而我到今天才知道这件事！ 原因是找到了，但也要找到问题的解决方法。而目前我所找到的解决方法就是使用ie7-js来扩展低版本的IE的功能。由于IE7也不支持inherit属性，所以就要用到ie7-js提供的IE8.js 。把下面的代码加入到你的页面中，低版本的IE就能呈现出IE8中所显示的样子了。 <!–[if lt IE 8]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script> <![endif]–>
CSS实现HTML元素透明
今天在秦哥的文章《CSS实现HTML元素透明的那些事》看到了各种浏览器中透明的实现。值得注意的是里面提到了IE团队推荐实现透明的方式，写法如下： { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: .5; } 秦哥也推荐了一个简单最好用的实现方式： { filter:alpha(opacity=30); opacity:.3; } 但个人觉得还是用IE团队推荐实现透明的方式相对来说比较好点，我想他们应该是经过很多测试总结出来的最优化方法。另外在《CSS实现HTML元素透明的那些事》一文中还提到了IE的hasLayout相关知识，很值得一读与收藏。
文件编码与样式错误
我先在火狐上测试的，一切正常，但一到IE上就傻眼了，我写的样式对于页面中的元素根本就没有任何作用。开始我怀疑是我的CSS语句写错了，就到W3C的CSS验证页面上去验证，也没有找到问题所在，当时真的有种叫天天不灵，叫地地不应的绝望。 直到快下班时，我突然发现Dreamweaver里的字体有点不一样，因为我们公司一般都是用UTF8的格式编写文件的，UTF8格式的文件和GB2312格式的文件在Dreamweaver里面显示所用到的字体是不一样的。我就试试把CSS文件改成UTF8格式。没想到果然是这个问题，改了下编码，网页在IE下也显示正常了。 这个编码问题会导致很多显示错误，有次我做的网页显示的就是一个空白页面，但里面明明是有内容的，找了半天也找不到原因，后来看到在页面头部里没有写明编码信息，就添加了编码信息，页面也就正常了。
TBCompressor介绍
公司原先的JS和CSS文件都是用在线压缩程序压缩的，看似方便，但很容易出错，可能是压缩程序把CSS里面的一些Hack语句给混淆了，于是我决定用大名鼎鼎的YUI compressor。 但YUI compressor也有一个缺点，那就是操作不人性化，要用输入命令行的方式进行操作，在实际应用中也有点不方便。今天发现了淘宝人开发的一个软件——TBCompressor，这个软件是在YUI compressor的基础上改进的，使用十分简单,详情请看lifesinger的《TBCompressor – JS和CSS压缩工具》一文。下面是TBCompressor的使用方法，下载请到http://code.google.com/p/ourtools/downloads/list下载，选择里面的yuicompressor_2.4.2.zip文件。 解压后点击里面的install.cmd安装，如果卸载点击uninstall.cmd就可以了； 在要压缩的JS文件或者CSS文件上点击右键，在弹出的菜单中选择Process with YUICompressor； 在原文件同一目录下会生成一个已经被压缩后的文件，文件名就是原文件名后面加个“-min”。比如原文件名为“test.js”，那么压缩后的文件就是“test-min.js”。建议把文件名取成name.source.js类型的，它会自动压缩生成name.js文件。 注意：TBCompressor默认压缩文件的编码类型为GB18030，如果要压缩其它编码类型的文件就修改下安装目录下的compressor.cmd文件，把里面的GB18030替换为你要的编码类型就可以了。比如我用的是UTF8，就把GB18030改成utf-8就行了。TBCompressor的压缩率并不是太高，但是却十分安全，对于CSS文件的Hack也能很好的保留。如果你是个对代码有洁癖的人，也可以利用己压缩的文件再优化。 下面再介绍一些在线优化JS和CSS的网站，不过这些经过压缩的代码在运行时可能会出错，所以在使用时要谨慎： http://javascriptcompressor.com/ http://www.xmlforasp.net/JSCompressor.aspx http://compressorrater.thruhere.net/ http://jsbeautifier.org/ http://www.codebeautifier.com/ http://www.lonniebest.com/FormatCSS/ http://www.cssdrive.com/index.php/main/csscompressor/ http://tools.arantius.com/css-compressor
Less——强大的css开发管理利器
Less是一个开发管理CSS的强大工具，强大在哪里呢？她给CSS增加了设置变量（variables）、引用（mixins）、嵌套（nested）、运算（operations）的功能。下面用实际代码来演示Less的作用。 首先新建一个文件：example.less，less格式文件的语法和css文件格式一样，只要你有css基础，你就能很快地掌握less。 设置变量（variables） 设置变量（variables）功能和JavaScript文件中设置变量的形式差不多，一次设置，就可以重复使用。在新建的example.less输入如下代码： @brand_color: #4D926F; #header { color: @brand_color; } h2 { color: @brand_color; } 经过编译后就能产生一个example.css文件，其内容如下： #header { color: #4D926F; } h2 { color: #4D926F; } 样式#header和h2中引用的@brand_color值已经变成了#4D926F，有点意思了吧，别急，接着往下看。 引用（mixins） 引用（mixins）功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容： .rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header … 继续阅读
Less安装步骤
要想安装Less，您的电脑上必须要先配置好Ruby环境，还要安装Ruby的一个组件——RubyGems。因为在中国，Windows系统的安装率是最高的，那这里就介绍下在Windows系统下Less的安装步骤，在Linux下的安装步骤也大同小异。 首先下载Ruby的安装文件，可以到这里下载，建议选择“一步安装”程序。安装过程非常简单，和普通安装程序过程无异，但可以留心下安装组件步骤： 可以把里面Scite和Enable RubyGems两个选项去掉。Scite是一个文本编辑器，我一直用这个编辑器，功能很强大（嘿嘿，忍不住又夸奖几句），但Ruby的这个版本是面向于Ruby配置的，而我有很多种文件类型要编辑，所以我选用Scite官方发布的版本。
自动清除浮动
在做网页时经常会碰到元素的自动清除浮动问题，现记下两种解决方法。设有网页元素如下： <div class="container"> <div class="left"> 左浮动元素<br /> 左浮动元素<br /> 左浮动元素<br /> 左浮动元素<br /> 左浮动元素<br /> 左浮动元素<br /> 左浮动元素<br /> </div> <div class="right"> 右浮动元素<br /> 右浮动元素<br /> 右浮动元素<br /> 右浮动元素<br /> 右浮动元素<br /> 右浮动元素<br /> 右浮动元素<br /> </div> </div> 若要class值为“container”中的两个元素分别左右浮动，则需以下CSS代码： div.container{ … 继续阅读