Tag: CSS预览模式: 普通 | 列表

[CSS]解决IE6下非a标签的hover伪类css[国际版]

一不小心,花了几个小时写了个解决IE6下非a标签hover伪类的解决方法.本来已经写出来发布了(就在本日志的上一篇),最后想...给这个方法起个名字吧,就叫...IE6HoverFix吧,回车发表.呵呵,顿时极度自恋中...
  几分钟后,想看看有没有人写过类似的东西,于是百度关键词"IE6HoverFix",出来两个结果,都是英文的.而且似乎是打不开的页面.但其中一个词语引起我的注意:"IE6HoverFix.htc",于是好奇的将该文件下载下来,打开一看,哇噻,牛叉!测试了一下,比我写的好用多啦!然后里面还有原作者的官方网站,顺藤摸瓜,爬到作者的blog(全e文...),发现还有最新版更新...牛叉!
  这下好了,至此,IE6下的png透明、hover都解决了,恭喜一下!
附:

查看更多...

Tags: CSS 解决 IE6 非a标签 hover 伪类

分类:软件推荐 | 固定链接 | 评论: 5 | 引用: 0 | 查看次数: 678
做CSS的都知道,IE6只支持a标签的hover伪类,而IE7/IE8/FF均支持其他标签的hover伪类样式.以前做css时尽量尽量避免非a标签的样式hover,刚刚花了点时间坐下来研究了下htc方式加载javascript来解决该问题,事实证明有效.哈,以后做设计时又少了一个IE6的限制啦!自IE6下png图片透明解决后,这又是一个具有非常意义的成果.
  下面是例子和使用方法的说明,如果有朋友有更好的解决方法,欢迎告知本人,本人邮箱:heycoffee@foxmail.com.
  为了保护代码的原创性,暂时只放图片形式的方法,如果要测试效果,请对照敲出来测试,或Q本人或Email本人...(想想上次发布的IE8正式版下的CSShack方法被各网站拔去改得面目全非...以下省略3k字...).本方法暂且取名为:IE6HoverFix.
  请注意,效果仅在IE6下有效,请注意测试时所使用的浏览器.

查看更多...

Tags: CSS 原创 解决 IE6 非a标签 hover 伪类 样式 首发

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1438

[CSS]三点关于内联元素的margin属性见解

CSS中,HTML的元素分为两大类:块元素与内联元素.前段时间有经验丰富的设计师同事问我"内联元素"是什么意思.我汗了一把.
  其实CSS这个东西除了书本上说的东西,也还需要多用才能总结体会.以下是刚刚想到的三点见解.
第一:任何内联元素,只要设置了float,它就自动变成了块元素.例如img,你设置了它为左浮动,或者右浮动,那么它就具有了块元素所拥有的特性.

查看更多...

Tags: CSS 三点 关于 内联 元素 margin 属性 见解

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 349

[CSS]关于CSS的0与0px

有同事看见我写的css代码中的0没有加上长度单位,于是一阵惊诧过后告诉我一定要加上单位"px",我问他为什么,他说不知道,反正他从来都是这样写的.
  其实我个人觉得写与不写没有什么太大的区别.回来搜索了一下,也没有发现网友说有太大区别.所以同事说的没错.但这个可能要根据个人习惯了.我个人更习惯不带单位,理由是这样css文件占用的字节数会少一点点.不然为什么还有一种优化技术叫css压缩呢?其实在写css的时候就省略掉一些可以省略的单位不是更好?"0"占一个字节,"0px"却占了3个字节.而且"0"比"0px"的辨识度更高.而且好像常见的浏览器还没有发现不能识别0的.
  以上仅个人意见.

查看更多...

Tags: 关于 CSS 0 0px

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 168

[CSS]再发现一个IE6/7的小Bug

再次发现一个IE6/7的小Bug.该bug影响不大,但需要说明一下,提醒下自己,也提醒下需要的朋友.
  例如在下面的代码中,就会出席一个奇怪的现象:
<a href="#" style="display:block;width:100px;height:100px;"><div><img src="image.jpg" /></div></a>
  上面这段代码的意思是:将a标签定义为块元素,然后里面放一个div,div里面再放一张图片,这时,在IE6/7下,图片就会挡住a标签的链接,也就是说此时在图片上面点击鼠标,是不会执行跳转的,哪怕图片和div统统都是包含在a标签内的.但是在IE8/FF下则正如我们所想的那样,一切正常.
  为什么呢?这是IE6/7对CSS支持不够完善引起的,在此情况下,尽管将a标签定义为了块元素,但它却还不是真正的"块",在某种程度上它还保留着内联元素的特性.
  由于近期的几个case里面经常用到这种效果,但所幸的是我的a链接不是直接跳转的,而是通过lightBox跳转打开大图片的--即:通过js的点击事件来跳转的,因此躲过一劫,不然就要伤脑筋想弯路啦!

查看更多...

Tags: CSS 发现 IE6/7 bug

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 161
一个曾经解决过的问题,今天又蹦出来了,让人气愤的是,居然忘记了自己曾经解决过,翻出来以前的代码一行行查找才发现曾经留下的"足迹".
  用过frameset的朋友可能都会遇到过frameset内嵌的页面body的clientHeight是不随css控制的(IE6除外).
  如何解决呢?当忘记以前解决过的我,今天也居然郁闷了一个下午.其实很简单,在内嵌页面的HTML代码最顶部插入一句javascript代码就可以了.代码如下:
……

查看更多...

Tags: js IE7 IE8 FF frameset 内嵌 页面 body 高度 CSS 解决 方法

分类:软件应用 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 764

[CSS]完美去除点击链接后留下的虚线框(兼容IE6/7/8/FF)

此方法由网络所得,经过整理而来,未增加链接,深有体会,所以尊重自己,也尊重他人的劳动成果.
  该方法用于完美去除超链接因点击过后留下的虚线框.未处理之前的情况如下图:
  处理之后的效果请将下面的两段代码保存到本地同一位置,再用网页打开查看.
  CSS代码如下
……

查看更多...

Tags: CSS 完美 去除 点击 链接 留下 虚线框 方案 兼容 IE6/7/8/FF

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 455

[CSS]在js的Popup弹窗内做CSShack无效

上个月发现在js的popup弹窗内做CSShack是无效的.关于此结论有兴趣的朋友可以在网上搜索最新JS的popup插件来测试.表现出来的样式全都是IE6的.个人猜测是js代码过滤了hack字符,所以无效.最近公司做的项目所有编辑页面都是基于此插件的,兼容性存在严重问题,实在担忧.

Tags: CSS js Popup 弹窗 hack 无效

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 208

FireFox与IE兼容的CSS切换方法

在公司做的一个页面,需要用到动态切换css文件,动态无刷新的调整显示效果.开始用了"document.styleSheets[0].href"这样的方式来改变href的值,但后来发现该代码在FireFox下无效,插了下网上的资料,原来样式表的href值在FireFox下是只读的,不可改变.因此需要另辟蹊径.
  正确的方法是,默认页面将所有的样式文件都加载,但用JavaScript代码控制默认只有一个样式表显示,例如:
<script type="text/javascript">
    document.styleSheets[0].disabled=false;

查看更多...

Tags: FireFox IE 兼容 CSS 切换 方法

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 242

[CSS]终于找到IE8正式版的CSS hack方法!

IE8正式版发布以来,一直在找一种区别IE8正式版的方法.在百度搜索"IE8 hack"有19万多个结果,google搜索则有243万多个结果,但几乎没有看到任何一种有效的方法是针对IE8正式版的,要知道IE8正式版和测试版在hack上是有很大区别的.而且网络上的方法几乎都是出自一两个人之手,最有名的可能要数那张linxz.cn的hack图片了,这张图片估计被国内的网友转载了几十万次,但目前这张图里的方法对IE8正式版是无效的.
  经过分析和总结网友们的各个无效方法,有了下面的行之有效的解决方案,或许以后还会有更好更简单的hack,但就目前来说这个方法可以解决燃眉之急.
  不再讲废话,来(以下的IE8均指IE8正式版,版本号:8.0.6001.18702):
"\9" 例:"margin:0px auto\9;".这里的"\9"可以区别所有IE和FireFox.

查看更多...

Tags: CSS IE8 正式版 hack

分类:软件应用 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 510

[CSS]不同浏览器对"居中"的解释是不同的

如果容器的宽度是奇数的,容器内的对象宽度是偶数的,奇数-偶数=奇数;或者容器的宽度是偶数,容器内对象的宽度是奇数,偶数-奇数=奇数.那么在这两种情况下,不同的浏览器对于"居中"的解释是不同的.
  这里的不同具体是指:对于容器内除去对象宽度后,剩下的奇数宽度再拿来左右平均分配,很显然像素没有0.5个像素的,因此浏览器要进行四舍五入的取舍,如果左边舍了,右边就要入,那么就存在有的浏览器左边舍,有的右边舍.
  为什么要弄清楚这个问题呢,例如存在下面的情况:一个容器内有上下两个图片,上下图片的宽度是不一样的,且上面的图片宽度会导致容器剩余宽度取舍,此时我们要的效果是两幅图片组合成一个完整的画面,也就是传统的切图之后重新组合,那么如果对此时的上图进行居中,下图用"margin"定位,问题就会出现了:在IE6、IE7、IE8、FireFox四个浏览器中就会出现有的画面显示是成功的,有的则有1个像素的错位.究其原因,就是本文最开始所提到的原因.
  如何解决此问题?解决的方法就是如果有成对或成群的图片需要"组合",则最好不用居中的处理方法,而用更加让人"放心"的"margin"或"padding"定位.

查看更多...

Tags: CSS 浏览器 居中 解释 不同

分类:软件应用 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 162

[CSS]IE6/7中的边框不定高问题

现有外层a和内层b,ab均有背景颜色和外框,b为左浮动,如果b层有n个并列的话,而a层又没有定义高度,则a层的外框在IE6/7中可能出现诡异的时有时无的效果.如下图:
状态1:      状态2:
  

查看更多...

Tags: CSS IE6/7 边框 问题

分类:软件应用 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 219

[CSS]为什么有时按钮的CSS样式在IE6/7下无效?

起因:有时候想改变一个按钮的样式,比如替换成一张渐变的背景图片等等.但当你设置好CSS之后,会发现IE8和FireFox下正常改变了效果,但IE6/7却依然无效(IE5.5都有效).为什么会这样?原因只因微软的IE没有按照标准来,而是试图建立自己的一套标准.更具体的原因就不再讨论了.以下是分析和解决办法.

分析:
  导致上面的结果的CSS问题在于,没有设置按钮图片的边框,哪怕边框的宽度设置为0px.

查看更多...

Tags: 为什么 按钮 CSS 样式 IE6/7 无效 解决

分类:软件应用 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 1249

[CSS]CSS与XHTML最好保存为UTF-8编码文本格式

有些朋友下载下来的国外CSS+XHTML文档十分漂亮,但却苦于在CSS中设置中文字体无效,甚至有设计高手也曾经问过我同样的问题,找遍了每一行代码都无果而终.其实很简单,只需要将下载的CSS文件及HTML文档另存为UTF-8编码文本格式即可.由于中文是方块字,与英文的字母字符不同,国外可能会有好多种英文编码格式,但为了通用性,像中文、韩文等最好还是另存为UTF-8国际通用字符编码.否则就可能出现设置字体无效,或乱码等.

Tags: CSS XHTML UTF-8 编码 文本格式

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 565

[CSS]PJblog通用皮肤首字下沉Bug之CSS修改

在使用PJblog的过程中,修改了FatMouse的皮肤,但FatMouse的皮肤有个小小的问题,就是当定义了CSS中正文部分首字下沉时,会带来其他部分的首字也下沉.
  今天看了一下CSS定义的标签选择符,做如下修改即可修正此bug:将CSS中定义首字下沉的".Content-body"换成为#logPanel:first-letter,.Content * .Content-body:first-letter"并加上#wbc_tag的取消下沉即可.即:具体修改代码如下:
将:
.Content-body:first-letter {

查看更多...

Tags: PJblog 通用 皮肤 首字 下沉 bug CSS 修改

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 349
一直都发现CSS中关于text-transform的capitalize属性在IE和FireFox下分别有细微的差别.在此小小总结一下.
  text-transform属性是用来设置字母大小写的,只针对英文字母.capitalize是text-transform的其中一个属性值,意思是单词首字母大写.但如果某个单词前面有中文,且中文与该英文单词之间没有空格,例如"<p>公司company</p>",或"<p>公司<span>company</span></p>",如果对这个进行设置capitalize属性值,则在IE下会显示正常:"公司Company",但在FireFox下却显示为:"公司company",也就是说在FireFox下毫无任何效果,相当于capitalize属性值无效,很显然这不是我们想要的.但是如果在中英文之间加个空格,则两个浏览器均显示正常,如:"<p>公司 company</p>",或"<p>公司 <span>company</span></p>".
  总结:IE浏览器虽然有很多bug,有些地方也没有按照国际通用标准设计,包括最新的IE8正式版,但有些地方还是考虑了用户的实际使用习惯的,尽管某些习惯不符合严格意义上的"逻辑".FireFox的capitalize可能是严格执行了首字母大写的规则,但它没有考虑是否是中文还是英文,统一判断为如果没有空格出现,当前首字母就不能称之为"首字母",因此不执行大写,尽管相邻两个字符之间一个是中文,一个是英文.
  掌握了这个规律之后,以后编写代码时,如果遇到中文后面紧跟英文的,英文的第一个字母还是手动大写的为好.

查看更多...

Tags: CSS text-transform capitalize 细微区别

分类:软件应用 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 784

[CSS]CSS书推荐

最近在看几本CSS的书,还不错,推荐一下:

1、CSS标准网页布局开发指南,清华出版社
2、CSS网站布局实录(第二版),科学出版社

查看更多...

Tags: CSS 推荐

分类:心情故事 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 727