Kane's Blog » XHTML&CSS http://iamkane.com Bug can be anywhere,Can you find it? Mon, 21 Jun 2010 11:05:40 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 最快捷的纯CSS的 DIV 垂直居中 http://iamkane.com/index.php/archives/48 http://iamkane.com/index.php/archives/48#comments Wed, 05 Aug 2009 09:23:58 +0000 Kane http://iamkane.com/?p=48 div 垂直居中这个话题搜索引擎一堆，方法也有好几种。下面介绍一种比较快捷的方法。

 

 假如 box 的高和宽为100px

 

 .centered_div { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background: red; }

 

 

假如 box的宽度为500px 高度为200px

 

  .centered_div { width:500px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -100px; background: red; }

 

 

 

]]> http://iamkane.com/index.php/archives/48/feed 0 具有继承inherit的CSS属性汇总 http://iamkane.com/index.php/archives/39 http://iamkane.com/index.php/archives/39#comments Wed, 24 Jun 2009 16:35:30 +0000 Kane http://iamkane.com/?p=39 什么是继承 inherit？

意思就是你在某个elements上添加了以下的css 属性，那么这个 elements 下面的所有子元素都会继承这个css属性。最典型的就是 color 这个属性。现在汇总一下，以后写css的时候，就可以更放心了。


	/*常用*/
	color:;
	text-indent:;
	text-align:;
	line-height:;
	list-style-type:;
	list-style-image:;
	list-style-position:;
	list-style:;
	cursor:;

	/*不常用*/
	direction:;
	text-transform:;
	word-spacing:;
	white-space:;
	letter-spacing:;
	caption-side:;
	border-spacing:;
	empty-cells:;
	border-collapse:;
	speak-header:;
	page-break-inside:;
	page:;
	orphans:;
	widows:;
	volume:;
	speak:;
	azimuth:;
	quotes:;
]]> http://iamkane.com/index.php/archives/39/feed 0 让IE6 支持 min-height 属性 http://iamkane.com/index.php/archives/37 http://iamkane.com/index.php/archives/37#comments Wed, 24 Jun 2009 09:48:15 +0000 Kane http://iamkane.com/?p=37 现在唯独IE6 这个死家伙不支持min-height 属性，平时在某些页面需要使用到的时候，就出现问题了。目前我想找了一个比较笨的方法实现： 因为IE6 容器的高度是根据容器内容多少而自动增长的。所以只要单独给ie6一个hack 就可以了。


<style type="text/css">

div{
border:1px #000 solid;
min-height:200px;
_height:200px; /*hack 4 ie6*/
}
</style>

<div>
test
</div>
]]> http://iamkane.com/index.php/archives/37/feed 2 input 中文字体和英文数字在IE下的问题 http://iamkane.com/index.php/archives/28 http://iamkane.com/index.php/archives/28#comments Thu, 14 May 2009 16:22:13 +0000 Kane http://iamkane.com/?p=28 平常一直用开FF 看网站，今天自己刚好做searchbox用IE看的时候，发现了这个问题。

当全局使用的字体是Tahoma,Helvetica,Arial,sans-serif 的时候，input 输入框的时候，如果里面有中文字体时，无法对其进行 padding-top。而出里面包含英文或者数字的时候就可以padding-top。后来研究了一下淘宝有没有此类问题。原来是字体的问题…

解决方法：

在reset css 中，给input类加上字体为宋体即可。

input, button, textarea, select, optgroup, option {
    font-family: "宋体";
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
]]> http://iamkane.com/index.php/archives/28/feed 0 (X)HTML保留字符（实体） http://iamkane.com/index.php/archives/27 http://iamkane.com/index.php/archives/27#comments Fri, 08 May 2009 12:14:18 +0000 Kane http://iamkane.com/?p=27 HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集。

ISO-8859-1 的较低部分（从 1 到 127 之间的代码）是最初的 7 比特 ASCII。

ISO-8859-1 的较高部分（从 160 到 255 之间的代码）全都有实体名称。

这些符号中的大多数都可以在不进行实体引用的情况下使用，但是实体名称或实体编号为那些不容易通过键盘键入的符号提供了表达的方法。

注释：实体名称对大小写敏感。

带有实体名称的 ASCII 实体

结果 描述 实体名称 实体编号
“ quotation mark &quot; &#34;
‘ apostrophe  &apos; &#39;
& ampersand &amp; &#38;
< less-than &lt; &#60;
> greater-than &gt; &#62;
 

ISO 8859-1 符号实体

结果 描述 实体名称 实体编号
  non-breaking space &nbsp; &#160;
¡ inverted exclamation mark &iexcl; &#161;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¤ currency &curren; &#164;
¥ yen &yen; &#165;
¦ broken vertical bar &brvbar; &#166;
§ section &sect; &#167;
¨ spacing diaeresis &uml; &#168;
© copyright &copy; &#169;
ª feminine ordinal indicator &ordf; &#170;
« angle quotation mark (left) &laquo; &#171;
¬ negation &not; &#172;
­ soft hyphen &shy; &#173;
® registered trademark &reg; &#174;
¯ spacing macron &macr; &#175;
° degree &deg; &#176;
± plus-or-minus  &plusmn; &#177;
² superscript 2 &sup2; &#178;
³ superscript 3 &sup3; &#179;
´ spacing acute &acute; &#180;
µ micro &micro; &#181;
paragraph &para; &#182;
· middle dot &middot; &#183;
¸ spacing cedilla &cedil; &#184;
¹ superscript 1 &sup1; &#185;
º masculine ordinal indicator &ordm; &#186;
» angle quotation mark (right) &raquo; &#187;
¼ fraction 1/4 &frac14; &#188;
½ fraction 1/2 &frac12; &#189;
¾ fraction 3/4 &frac34; &#190;
¿ inverted question mark &iquest; &#191;
× multiplication &times; &#215;
÷ division &divide; &#247;

ISO 8859-1 字符实体

结果 描述 实体名称 实体编号
À capital a, grave accent &Agrave; &#192;
Á capital a, acute accent &Aacute; &#193;
 capital a, circumflex accent &Acirc; &#194;
à capital a, tilde &Atilde; &#195;
Ä capital a, umlaut mark &Auml; &#196;
Å capital a, ring &Aring; &#197;
Æ capital ae &AElig; &#198;
Ç capital c, cedilla &Ccedil; &#199;
È capital e, grave accent &Egrave; &#200;
É capital e, acute accent &Eacute; &#201;
Ê capital e, circumflex accent &Ecirc; &#202;
Ë capital e, umlaut mark &Euml; &#203;
Ì capital i, grave accent &Igrave; &#204;
Í capital i, acute accent &Iacute; &#205;
Î capital i, circumflex accent &Icirc; &#206;
Ï capital i, umlaut mark &Iuml; &#207;
Ð capital eth, Icelandic &ETH; &#208;
Ñ capital n, tilde &Ntilde; &#209;
Ò capital o, grave accent &Ograve; &#210;
Ó capital o, acute accent &Oacute; &#211;
Ô capital o, circumflex accent &Ocirc; &#212;
Õ capital o, tilde &Otilde; &#213;
Ö capital o, umlaut mark &Ouml; &#214;
Ø capital o, slash &Oslash; &#216;
Ù capital u, grave accent &Ugrave; &#217;
Ú capital u, acute accent &Uacute; &#218;
Û capital u, circumflex accent &Ucirc; &#219;
Ü capital u, umlaut mark &Uuml; &#220;
Ý capital y, acute accent &Yacute; &#221;
Þ capital THORN, Icelandic &THORN; &#222;
ß small sharp s, German &szlig; &#223;
à small a, grave accent &agrave; &#224;
á small a, acute accent &aacute; &#225;
â small a, circumflex accent &acirc; &#226;
ã small a, tilde &atilde; &#227;
ä small a, umlaut mark &auml; &#228;
å small a, ring &aring; &#229;
æ small ae &aelig; &#230;
ç small c, cedilla &ccedil; &#231;
è small e, grave accent &egrave; &#232;
é small e, acute accent &eacute; &#233;
ê small e, circumflex accent &ecirc; &#234;
ë small e, umlaut mark &euml; &#235;
ì small i, grave accent &igrave; &#236;
í small i, acute accent &iacute; &#237;
î small i, circumflex accent &icirc; &#238;
ï small i, umlaut mark &iuml; &#239;
ð small eth, Icelandic &eth; &#240;
ñ small n, tilde &ntilde; &#241;
ò small o, grave accent &ograve; &#242;
ó small o, acute accent &oacute; &#243;
ô small o, circumflex accent &ocirc; &#244;
õ small o, tilde &otilde; &#245;
ö small o, umlaut mark &ouml; &#246;
ø small o, slash &oslash; &#248;
ù small u, grave accent &ugrave; &#249;
ú small u, acute accent &uacute; &#250;
û small u, circumflex accent &ucirc; &#251;
ü small u, umlaut mark &uuml; &#252;
ý small y, acute accent &yacute; &#253;
þ small thorn, Icelandic &thorn; &#254;
ÿ small y, umlaut mark &yuml; &#255;

HTML 支持的数学符号

结果 描述 实体名称 实体编号
∀ for all &forall; &#8704;
∂ part &part; &#8706;
∃ exists &exists; &#8707;
∅ empty &empty; &#8709;
∇ nabla &nabla; &#8711;
∈ isin &isin; &#8712;
∉ notin &notin; &#8713;
∋ ni &ni; &#8715;
∏ prod &prod; &#8719;
∑ sum &sum; &#8721;
− minus &minus; &#8722;
∗ lowast &lowast; &#8727;
√ square root &radic; &#8730;
∝ proportional to &prop; &#8733;
∞ infinity &infin; &#8734;
∠ angle &ang; &#8736;
∧ and &and; &#8743;
∨ or &or; &#8744;
∩ cap &cap; &#8745;
∪ cup &cup; &#8746;
∫ integral &int; &#8747;
∴ therefore &there4; &#8756;
∼ simular to &sim; &#8764;
≅ approximately equal &cong; &#8773;
≈ almost equal &asymp; &#8776;
≠ not equal &ne; &#8800;
≡ equivalent &equiv; &#8801;
≤ less or equal &le; &#8804;
≥ greater or equal &ge; &#8805;
⊂ subset of &sub; &#8834;
⊃ superset of &sup; &#8835;
⊄ not subset of &nsub; &#8836;
⊆ subset or equal &sube; &#8838;
⊇ superset or equal &supe; &#8839;
⊕ circled plus &oplus; &#8853;
⊗ cirled times &otimes; &#8855;
⊥ perpendicular &perp; &#8869;
⋅ dot operator &sdot; &#8901;

HTML 支持的希腊字母

结果 描述 实体名称 实体编号
Α Alpha &Alpha; &#913;
Β Beta &Beta; &#914;
Γ Gamma &Gamma; &#915;
Δ Delta &Delta; &#916;
Ε Epsilon &Epsilon; &#917;
Ζ Zeta &Zeta; &#918;
Η Eta &Eta; &#919;
Θ Theta &Theta; &#920;
Ι Iota &Iota; &#921;
Κ Kappa &Kappa; &#922;
Λ Lambda &Lambda; &#923;
Μ Mu &Mu; &#924;
Ν Nu &Nu; &#925;
Ξ Xi &Xi; &#926;
Ο Omicron &Omicron; &#927;
Π Pi &Pi; &#928;
Ρ Rho &Rho; &#929;
  Sigmaf   undefined
Σ Sigma &Sigma; &#931;
Τ Tau &Tau; &#932;
Υ Upsilon &Upsilon; &#933;
Φ Phi &Phi; &#934;
Χ Chi &Chi; &#935;
Ψ Psi &Psi; &#936;
Ω Omega &Omega; &#937;
       
α alpha &alpha; &#945;
β beta &beta; &#946;
γ gamma &gamma; &#947;
δ delta &delta; &#948;
ε epsilon &epsilon; &#949;
ζ zeta &zeta; &#950;
η eta &eta; &#951;
θ theta &theta; &#952;
ι iota &iota; &#953;
κ kappa &kappa; &#954;
λ lambda &lambda; &#923;
μ mu &mu; &#956;
ν nu &nu; &#925;
ξ xi &xi; &#958;
ο omicron &omicron; &#959;
π pi &pi; &#960;
ρ rho &rho; &#961;
ς sigmaf &sigmaf; &#962;
σ sigma &sigma; &#963;
τ tau &tau; &#964;
υ upsilon &upsilon; &#965;
φ phi &phi; &#966;
χ chi &chi; &#967;
ψ psi &psi; &#968;
ω omega &omega; &#969;
       
ϑ theta symbol &thetasym; &#977;
ϒ upsilon symbol &upsih; &#978;
ϖ pi symbol &piv; &#982;

HTML 支持的其他实体

结果 描述 实体名称 实体编号
Πcapital ligature OE &OElig; &#338;
œ small ligature oe &oelig; &#339;
Š capital S with caron &Scaron; &#352;
š small S with caron &scaron; &#353;
Ÿ capital Y with diaeres &Yuml; &#376;
ƒ f with hook &fnof; &#402;
ˆ modifier letter circumflex accent &circ; &#710;
˜ small tilde &tilde; &#732;
  en space &ensp; &#8194;
  em space &emsp; &#8195;
  thin space &thinsp; &#8201;
‌ zero width non-joiner &zwnj; &#8204;
‍ zero width joiner &zwj; &#8205;
‎ left-to-right mark &lrm; &#8206;
‏ right-to-left mark &rlm; &#8207;
– en dash &ndash; &#8211;
— em dash &mdash; &#8212;
‘ left single quotation mark &lsquo; &#8216;
’ right single quotation mark &rsquo; &#8217;
‚ single low-9 quotation mark &sbquo; &#8218;
“ left double quotation mark &ldquo; &#8220;
” right double quotation mark &rdquo; &#8221;
„ double low-9 quotation mark &bdquo; &#8222;
† dagger &dagger; &#8224;
‡ double dagger &Dagger; &#8225;
• bullet &bull; &#8226;
… horizontal ellipsis &hellip; &#8230;
‰ per mille  &permil; &#8240;
′ minutes &prime; &#8242;
″ seconds &Prime; &#8243;
‹ single left angle quotation &lsaquo; &#8249;
› single right angle quotation &rsaquo; &#8250;
‾ overline &oline; &#8254;
€ euro &euro; &#8364;
™ trademark &trade; &#8482;
← left arrow &larr; &#8592;
↑ up arrow &uarr; &#8593;
→ right arrow &rarr; &#8594;
↓ down arrow &darr; &#8595;
↔ left right arrow &harr; &#8596;
↵ carriage return arrow &crarr; &#8629;
⌈ left ceiling &lceil; &#8968;
⌉ right ceiling &rceil; &#8969;
⌊ left floor &lfloor; &#8970;
⌋ right floor &rfloor; &#8971;
◊ lozenge &loz; &#9674;
♠ spade &spades; &#9824;
♣ club &clubs; &#9827;
♥ heart &hearts; &#9829;
♦ diamond &diams; &#9830;

 

]]> http://iamkane.com/index.php/archives/27/feed 0 【原创】对标签重复写CSS，CSS选择符比较大小的问题。 http://iamkane.com/index.php/archives/24 http://iamkane.com/index.php/archives/24#comments Thu, 30 Apr 2009 15:29:02 +0000 Kane http://iamkane.com/?p=24 class 大家都知道的了。但是用了包含选择符后，又怎么一回事呢。 那么猜猜下面最终的颜色会是什么？ <!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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>css选择符</title> <style type="text/css"> #wrap #content h5.title{ color:red; } #wrap #content .title{ color:aqua; } #wrap #content h5{ color:black; } #content h5.title{ color:blue; } #content .title{ color:fuchsia; } #content h5{ color:gray; } h5.title{ color:green; } .title{ color:lime; } h5{ color:maroon; } </style> </head> <body> <div id="wrap"> <div id="content"> <h5 class="title">TestTestTestTestTestTest</h5> </div> </div> </body> </html> 最终发现选择符是按这整个排序比较大小的： 1. 包含选择符+类型选择符+类选择符 #wrap #content h5.title(包含选择符越大越优先) 2. 类型选择符+类选择符 h5.title 3. 类选择符 .title 4. 类型选择符 h5 如有发现错误HY提出.. ]]> 很多人都知道对某个标签重复写css，会已最后那个css 为有效。
ID>class 大家都知道的了。但是用了包含选择符后，又怎么一回事呢。
那么猜猜下面最终的颜色会是什么？

<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>css选择符</title>

<style type="text/css">

#wrap #content h5.title{
	color:red;
}

#wrap #content .title{
	color:aqua;
}

#wrap #content h5{
	color:black;
}

#content h5.title{
	color:blue;
}

#content .title{
	color:fuchsia;
}

#content h5{
	color:gray;
}

h5.title{
	color:green;
}
.title{
	color:lime;
}
h5{
	color:maroon;
}

</style>

</head>

<body>

	<div id="wrap">

		<div id="content">

			<h5 class="title">TestTestTestTestTestTest</h5>

		</div>

	</div>
</body>

</html>

最终发现选择符是按这整个排序比较大小的：

1. 包含选择符+类型选择符+类选择符 #wrap #content h5.title(包含选择符越大越优先)

2. 类型选择符+类选择符 h5.title

3. 类选择符 .title

4. 类型选择符 h5

如有发现错误HY提出..

]]> http://iamkane.com/index.php/archives/24/feed 0 firefox下div 被flash 遮盖的fix方法。 http://iamkane.com/index.php/archives/22 http://iamkane.com/index.php/archives/22#comments Mon, 27 Apr 2009 16:16:12 +0000 Kane http://iamkane.com/?p=22 一般IE 的话加个透明就可以了，但是flash好似不行。解决办法，就是在embed 中也加上wmode="transparent"

1、

很常用flash做为背景的命令,在这里就不罗嗦了。如果不加Firefox没问题,IE就会挡住DIV层显示。

2、

重点在这里,在中加入wmode="transparent"属性,Firefox中层的问题就迎刃而解。

]]> http://iamkane.com/index.php/archives/22/feed 0 ul 在IE8 FF下自适应高度的问题 http://iamkane.com/index.php/archives/19 http://iamkane.com/index.php/archives/19#comments Tue, 21 Apr 2009 11:18:17 +0000 Kane http://iamkane.com/?p=19 在IE8 FF 下 当 li float 了的时候，ul 会无法自动适应高度。此时2个方法fix 这个问题。

1. 对ul 进行float。

2. 对ul 进行 clearfix （reset中的 clearfix 类） http://www.iamkane.com/article.asp?id=10

一般推荐使用 clearfix 来解决。

]]> http://iamkane.com/index.php/archives/19/feed 0 针对IE8,IE7,IE6,Firefox 的CSS Hack http://iamkane.com/index.php/archives/18 http://iamkane.com/index.php/archives/18#comments Mon, 20 Apr 2009 16:52:18 +0000 Kane http://iamkane.com/?p=18 IE8出来后，又需多一个兼容的IE版本了。目前最快捷的 IE8 IE7 IE6 Firefox CSS hack 方法：注意顺序不能乱

#element{

color:red /*FF起效*/
color:/*\**/blue\9 /*IE8起效 注意前后加的hack字符*/
*color:black /*IE7起效*/
_color:green /*IE6起效*/
}
]]> http://iamkane.com/index.php/archives/18/feed 0 IE8 下使网站用IE7兼容模式 http://iamkane.com/index.php/archives/17 http://iamkane.com/index.php/archives/17#comments Fri, 17 Apr 2009 12:10:07 +0000 Kane http://iamkane.com/?p=17 当某些情况下，IE8 不兼容的时候可以用以下方法：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
]]> http://iamkane.com/index.php/archives/17/feed 0