CSS | 记事本

解决Chrome最小字体限制

十一月 19, 2010 by 小寒 0 comments

默认情况下，Chrome下面的最小字体为12px，想要突破这个限制只要在css里面加入-webkit-text-size-adjust: none就好了。

自定义样式的input[type=range]

七月 21, 2010 by 小寒 0 comments

今天下午有人在群里提出个问题，能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下，是可以实现上述的需求的。请用Chrome查看Demo。代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>自定義樣式的input[type=range]</title>
	<style type="text/css">
	#range {
		width: 600px;
		height: 10px;
		background: rgba(60, 114, 230, .8);
		border: 1px solid #333;
		-webkit-border-radius: 5px;
		-webkit-appearance: none !important;
	}

	#range::-webkit-slider-thumb{
		width: 28px;
		height: 28px;	

		background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#fff),
			to(#ccc)
		);

		border: 1px solid #000;
		-webkit-box-shadow: 0 0 6px #000;
		-webkit-border-radius: 14px;
		-webkit-appearance: none !important;
	}

	#result {
		border: 2px solid #ccc;
		width: 32px;
	}
	</style>
</head>
<body>
	<input type='range' min='0' max='1000' value='0' id='range' />
	<input type='text' id='result'/>
	<script type='text/javascript'>
	var result = document.getElementById('result');
	document.getElementById('range').onchange = function() {
		result.value = this.value;
	}
	</script>
</body>
</html>

代码中的”-webkit-appearance: none !important”很重要，要先把-webkit-appearance设置为none才能自定义样式。

CSS, HTML

让IE支持RGBa的背景色

六月 28, 2010 by 小寒 0 comments

文章部分内容来自：RGBa Browser Support

老版本的IE不支持RGBa的背景色，不过我们可以用滤镜实现同样的效果。上代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
		<style type="text/css">
			#div1 {
				padding: 10px;
				width: 380px;
				height: 205px;
				background: url(shuizhu.jpg);
			}
			#div2 {
				color: #FFF;
				font-size: 40px;
				font-weight: bold;
				text-align: center;

				height: 205px;
				line-height: 205px;
				background: rgba(125, 0, 0, .3);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000
						,endColorstr=#4B7D0000);
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				Hello world!
			</div>
		</div>
	</body>
</html>

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

下面附上示例中用到的图片：

CSS

有关.clearfix的一些事

六月 26, 2010 by 小寒 3 comments

一，什么是.clearfix

很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	zoom: 1;
}

<div class="clearfix">
	<div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素内部插入一个clear: both的块级元素，从而达到清除浮动的作用。这时的代码相当于：
```
<div>
	<div class="floated"></div>
	<div style="clear: both"></div>
</div>
```

二，总结

在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，大多数的情况下.clearfix:after都可以满足需求。除了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的……

CSS

白话Block Formatting Context

六月 24, 2010 by 小寒 10 comments

转载须写明出处，附带本文链接。关于文中的示例，请忘掉IE浏览器，用标准浏览器查看。

一，啥是Block Formatting Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。

二，怎样才能形成Block Formatting Context

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context

float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。

三，Block Formatting Context在生产中有什么作用

Block Formatting Context可以阻止边距折叠（margin collapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动。考虑一下下面的例子（请用标准浏览器查看）：
```
<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#red, #orange, #yellow, #green {
			width: 100px;
			height: 100px;
			float: left;
		}
		#red {
			background: red;
		}
		#orange {
			background: orange;
		}
		#yellow {
			background: yellow;
		}
		#green {
			background: green;
		}
	</style>
</head>
<body>
	<div id="c1">
		<div id="red"></div>
		<div id="orange"></div>
	</div>
	<div id="c2">
		<div id="yellow"></div>
		<div id="green"></div>
	</div>
</body>
</html>
```
在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
Block Formatting Context可以阻止元素被浮动覆盖。请看示例：
```
<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		#left {
			width: 100px;
			height: 100px;
			background: red;
			float: left;
		}
		#right {
			height: 200px;
			background: yellow;
		}
	</style>
</head>
<body>
	<div id="left"></div>
	<div id="right"></div>
</body>
</html>
```
在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。

如果想全面了解Block Formatting Context，请看CSS 101: Block Formatting Context这篇文章。

CSS, 原创

:after伪类的小应用

六月 10, 2010 by 小寒 0 comments

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
h1[id]:hover::after {
content: " #"attr(id);
}
</style>
</head>
<body>
<h1 id="test">测试标题</h1>
</body>
</html>

注：h1[id]只选择有id属性的h1标签。

CSS

用CSS禁用输入法

五月 25, 2010 by 小寒 0 comments

用简单的一行CSS就可以在表单元素里禁用输入法。

<!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">
<head>
	<title>TEST</title>
	<style type="text/css">
		.ime-disabled {
			ime-mode: disabled;
		}
	</style>
	<script type="text/javascript">
	</script>
</head>
<body>
	<input type="text" /><br />
	<input class="ime-disabled" type="text" />
</body>
</html>

不一定兼容所有浏览器，目前测试过并且支持ime-mode的有IE6和FF。

CSS

IE6中选择器的BUG

五月 21, 2010 by 小寒 0 comments

请仔细观察下面的代码，在FF中是正常显示的，但在IE6中字体变成了红色。

<!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">
<head>
	<title>TEST</title>
	<style type="text/css">
		.span.text a {
			color: red;
		}
	</style>
</head>
<body>
	<span class="text"><a href="#">IE6下是红的</a></span>
</body>
</html>

象.a.b与.a.b.c这种写法，ie6只能识别最后一个选择器，也就是.b和.c。

CSS

记事本

这里全是流水账