朽木自雕 » CSS http://www.xiumu.org 关注互联网动态，专注于WEB开发 Sun, 05 Feb 2012 17:20:46 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 关于min-height的IE6及以下浏览器的Hack[整理] http://www.xiumu.org/technology/on-the-min-height-in-ie6-and-below-your-browsers-hack-finishing.shtml http://www.xiumu.org/technology/on-the-min-height-in-ie6-and-below-your-browsers-hack-finishing.shtml#comments Mon, 22 Mar 2010 06:53:06 +0000 朽木 http://www.xiumu.org/?p=1295

page层内容少，页面很矮，加了min-height后FF与IE7.0中page层可以覆盖住container的背景色。而IE6及以下min-height无法辨认，所以露出了我不想让他露出来的container层的红色背景。

最简单的办法还是hack：

#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
}

这样IE6中page的确有了最小高度，能覆盖住container，但是其实也只有500px这么一个高度，等到内容多了这个page也不会自动拉长了，这样不行，折腾多时，终于找到个方法可以解决IE又有最小高度又能自动拉伸的目标：

#page{
background:#F00;
min-height:500px;
height:auto !important;
height:500px;
overflow:visible;
}

就是这句overflow:visible使IE们能够当作height:auto来处理。

]]> http://www.xiumu.org/technology/on-the-min-height-in-ie6-and-below-your-browsers-hack-finishing.shtml/feed/ 0 HTML及CSS常用颜色英文词汇 http://www.xiumu.org/technology/html-and-css-color-commonly-used-english-words.shtml http://www.xiumu.org/technology/html-and-css-color-commonly-used-english-words.shtml#comments Tue, 23 Feb 2010 11:21:13 +0000 朽木 http://www.xiumu.org/?p=1070 #table_tackcolor { border: 1px solid #393C39;

font-size:12px; width:500px; padding:5px; } #table_tackcolor td{ border: 1px solid #393C39; text-align:center; } #table_tackcolor tr.line { height:5px; } .color_000 { color : #000; }
黑色 银色 灰色 白色 茶色 红色 紫色 紫红
black silver gray white maroon red purple fuchsia
#000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF
绿色 亮绿 橄榄 黄色 深蓝 蓝色 青色 浅绿
green lime olive yellow navy blue teal aqua
#008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF

就这点东东，全手写的花了我半个小时才整理出来～悲剧 希望能帮到需要的朋友·

]]> http://www.xiumu.org/technology/html-and-css-color-commonly-used-english-words.shtml/feed/ 4 FF下不显示背景图片 – 解决方法 http://www.xiumu.org/technology/do-not-display-background-images-ff-a-solution.shtml http://www.xiumu.org/technology/do-not-display-background-images-ff-a-solution.shtml#comments Sun, 31 Jan 2010 04:39:39 +0000 朽木 http://www.xiumu.org/?p=1009 问题:
DIV层中包含浮动层，背景图在IE下显示正常，FF下不显示。

网上找到的解释：

在FF里如果里面的元素加了float:left（right),它就不会被撑开的，也就是说的它的高度是0，如果正常显示，必须加上：overflow:auto

]]> http://www.xiumu.org/technology/do-not-display-background-images-ff-a-solution.shtml/feed/ 3 关于浏览器兼容的点点滴滴 http://www.xiumu.org/technology/with-regard-to-the-browser-compatible-bit-by-bit.shtml http://www.xiumu.org/technology/with-regard-to-the-browser-compatible-bit-by-bit.shtml#comments Wed, 20 Jan 2010 10:18:29 +0000 朽木 http://www.xiumu.org/?p=967 < /head>之间如果有< base target=”_blank”/>， position:relative层下的带float属性层内的文字无法选中。 5.IE6下文字与图片同时出现的元素中line-height失效。 文本 解决办法：为图片和文字添加float。 待续。]]> 浏览器兼容除了不同的浏览器厂家外，万恶的微软推出了IE5、6、7、8，并且IE9马上就要问世了。

下面进入正题

1. 刚才发现的一个问题，DIV设置背景，DIV下LI无背景，在IE7下可显示出背景图片，IE6下背景图片不显示，LI设置background:none;仍然无效。
解决办法：为DIV加zoom:1;属性,zoom就是为IE6生的，这话一点不错。

2. IE6下带有浮动属性的元素MARIN值会是制定数值的两倍
解决办法：为元素加上display:inline属性，另外，浮动属性必须加宽度，且display:inline与float不可以作用在UL上。

3. IE多了一只猪BUG 详情
解决办法：使用下面语句做注释

 picRotate start


4. 在IE6中< head>< /head>之间如果有< base target=”_blank”/>， position:relative层下的带float属性层内的文字无法选中。

5.IE6下文字与图片同时出现的元素中line-height失效。

文本

解决办法：为图片和文字添加float。

待续。

]]> http://www.xiumu.org/technology/with-regard-to-the-browser-compatible-bit-by-bit.shtml/feed/ 5 CSS的At-Rules@规则 http://www.xiumu.org/technology/css-at-rules-rules.shtml http://www.xiumu.org/technology/css-at-rules-rules.shtml#comments Sat, 10 Oct 2009 09:07:16 +0000 朽木 http://www.xiumu.org/?p=569 　　伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。

First letters and First lines 首字母和首行

Example Source Code

first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。

 

p:first-letter {
font-size: 3em;
float: left;
}

p:first-line {
font-weight: bold;
}

Before and after 前后

before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引号标记里关闭任何字符串或使用url(imagename)图片。

 

 Example Source Code

blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: ”POW: ”
}
p:before {
content: url(images/jam.jpg)
}

　　听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。

]]> http://www.xiumu.org/technology/css-at-rules-rules.shtml/feed/ 0 国外的CSS按钮样式 http://www.xiumu.org/note/abroad-css-button-style.shtml http://www.xiumu.org/note/abroad-css-button-style.shtml#comments Fri, 09 Oct 2009 13:58:04 +0000 朽木 http://www.xiumu.org/?p=564 技术含量都很高哦，值得研究，其中还有IE6支持HOVER伪类的HACK，很简单的几句搞定勒，看来要学习的地方还很多。

How to make sexy buttons with CSS


» Source

Scalable CSS buttons with PNG images and background colors


» Source

Sexy CSS Hover Button


» Source

CSS Submit buttons


» Source

Simple Round CSS Buttons ( Wii Buttons )


» Source

Make fancy buttons using CSS sliding doors technique


» Source

Beautiful CSS buttons with icon set


» Source

Sliding Doors buttons using only 1 image


» Source

Rediscovering the button element


» Source

Using sliding doors in WordPress


» Source

]]> http://www.xiumu.org/note/abroad-css-button-style.shtml/feed/ 0 CSS网页布局中易犯的10个小错误 http://www.xiumu.org/note/css-page-layout-in-10-easy-to-commit-a-small-mistake.shtml http://www.xiumu.org/note/css-page-layout-in-10-easy-to-commit-a-small-mistake.shtml#comments Fri, 09 Oct 2009 05:21:10 +0000 朽木 http://www.xiumu.org/?p=559 即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。

1. 检查HTML元素是否有拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 用删除法确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式？

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD？

如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。

注: 本文来源于网络，出处不明。

]]> http://www.xiumu.org/note/css-page-layout-in-10-easy-to-commit-a-small-mistake.shtml/feed/ 0 全方位清理浮动 http://www.xiumu.org/note/full-clean-up-float.shtml http://www.xiumu.org/note/full-clean-up-float.shtml#comments Thu, 08 Oct 2009 10:35:17 +0000 朽木 http://www.xiumu.org/?p=471 清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,演示地址)。

  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签，以及css的clear属性
  6. 采用br标签，以及css的clear属性
  7. 采用br标签，以及其自身HTML的clear属性

粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）

  1. 优点结构语义化完全正确，不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确，代码量极少。
    缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。
    建议内个模块使用，请勿嵌套。
  3. 优点结构语义化完全正确，代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用，请勿嵌套。
  4. 优点结构语义化完全正确，代码量极少。
    缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少，复用性极高。
    缺点完全不能完美的适应语义化，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优；代码量极少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
]]> http://www.xiumu.org/note/full-clean-up-float.shtml/feed/ 0 overflow与text-indent:-9999px 字体隐藏及input value偏移 http://www.xiumu.org/note/overflow-text-indent-9999px-input-value.shtml http://www.xiumu.org/note/overflow-text-indent-9999px-input-value.shtml#comments Sat, 05 Sep 2009 19:20:11 +0000 朽木 http://www.xiumu.org/?p=355 作为一个web前端开发
为了html语义化
常常要给内容模块加上一些标题来让页面更有意义
当然还有我们的图片按钮
在抛开css裸奔的情况下也能很顺利的汲取到页面信息
通常为了传达更好的视觉效果
我们常用图片替代掉字体
而早前的前端开发常直接不在html中给出内容
用 ；（甚至为空）
这样在没有加载到css时就无法知道这个区块究竟是什么内容了

正题开始
通常偏移掉字体的方式是
使用text-indent:-9999px;
可是他有一个局限性 他只适用于块级元素block
而我们往往有时候想偏移掉的a上的字体
所以问题就来了
text-indent:-9999px;虽然用起来比较惬意
将a转化成block的话 往往 他身后的的元素就被他赶到下一行了
如果正好这个a后面 是一个a按钮
就要用float来浮动以使他身后再出现簇拥者

这样是不是有些麻烦呢
所以推荐使用
line-height:0;
font-size:0;
overflow:hidden;
能完美“隐藏”掉你background之上的字体
经测试 ie6.0 、 7.0 、8.0、firefox 3.010 通过

而针对input value的隐藏这个方式就有些吃力了
所以还是只能用block加text-indent来“偏移”模拟隐藏了
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
经测试 ie6.0 、 7.0 、firefox 3.010 通过

]]> http://www.xiumu.org/note/overflow-text-indent-9999px-input-value.shtml/feed/ 1 CSS中的display:none和visibility:hidden的区别 http://www.xiumu.org/note/css-visibility-hidden.shtml http://www.xiumu.org/note/css-visibility-hidden.shtml#comments Thu, 13 Aug 2009 03:30:44 +0000 朽木 http://www.xiumu.org/?p=294 二者都是隐藏HTML元素，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。
display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

具体区别请看演示代码吧：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”gb2312″>
<head>
<head>
<title> 实例演示：CSS中的display:none和visible:hidden的区别 </title>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<meta name=”author” content=”枫岩,CnLei.y.l@gmail.com”>
<meta name=”copyright” content=”http://www.cnlei.com” />
</head>
<body>
<p><a href=”javascript:alert($(‘CnLei_1′).innerHTML+’的宽度:\n’+GetXYWH($(‘CnLei_1′)).W);”>点击这里 display:none;</a></p>
<p><a href=”javascript:alert($(‘CnLei_2′).innerHTML+’的宽度:\n’+GetXYWH($(‘CnLei_2′)).W);”>点击这里 visibility:hidden;</a></p>
<div id=”CnLei_1″ style=”display:none;”>CnLei_1</div>
<div id=”CnLei_2″ style=”visibility:hidden;”>CnLei_2</div>

<script type=”text/javascript”>
var w3c=(document.getElementById)? true: false;
var agt=navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf(“msie”) != -1) && (agt.indexOf(“opera”) == -1) && (agt.indexOf(“omniweb”) == -1));
var ie5=(w3c && ie)? true : false;
var ns6=(w3c && (navigator.appName==”Netscape”))? true: false;

function $(o){
return document.getElementById(o)?document.getElementById(o):o;
}

function GetXYWH(o){
var o=$(o);
var nLt=0;
var nTop=0;
var offsetParent = o;
while (offsetParent!=null && offsetParent!=document.body) {
nLt+=offsetParent.offsetLeft;
nTop+=offsetParent.offsetTop;
if(!ns6){
parseInt(offsetParent.currentStyle.borderLeftWidth)>0?nLt+=parseInt(offsetParent.currentStyle.borderLeftWidth):”";
parseInt(offsetParent.currentStyle.borderTopWidth)>0?nTop+=parseInt(offsetParent.currentStyle.borderTopWidth):”";
}
offsetParent=offsetParent.offsetParent;
}
return {X:nLt,Y:nTop,W:o.offsetWidth,H:o.offsetHeight};
}
</script>
</body>
</html>

]]> http://www.xiumu.org/note/css-visibility-hidden.shtml/feed/ 0