<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>负罪者 &#187; CSS</title>
	<atom:link href="http://www.uiorz.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.uiorz.com</link>
	<description>设计 生活 感悟</description>
	<lastBuildDate>Wed, 07 Jul 2010 01:17:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>一些IE浏览器不支持的很有用CSS属性</title>
		<link>http://www.uiorz.com/2009/07/26/%e4%b8%80%e4%ba%9bie%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8d%e6%94%af%e6%8c%81%e7%9a%84%e5%be%88%e6%9c%89%e7%94%a8css%e5%b1%9e%e6%80%a7/</link>
		<comments>http://www.uiorz.com/2009/07/26/%e4%b8%80%e4%ba%9bie%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8d%e6%94%af%e6%8c%81%e7%9a%84%e5%be%88%e6%9c%89%e7%94%a8css%e5%b1%9e%e6%80%a7/#comments</comments>
		<pubDate>Sun, 26 Jul 2009 01:01:24 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/?p=356</guid>
		<description><![CDATA[转自 Long Step &#8211; [with 猫嗔] 让我们看看一些可能非常有用但是在IE浏览器中(主要是IE6和IE7)却不能使用的CSS属性。本文发表时尚未测试这些属性在IE8中的表现。我稍后会做一个测试页面，用来测试这些属性在所以IE浏览器中的表现。 其中注意clip属性IE其实是支持，但是写法不一样，这个属性在处理不同尺寸图片的时候是挺有用的。 1、Outline 在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局，它会让这个元素的宽度额外增加2px。 outline属性是完美的替代者，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7不支持outline属性，所以，它不能在这两个浏览器中用于调试。 2、Inherit(值) 在CSS开发中有很多这样的例子：通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性，这样你就可以避免相当多的键盘输入。 这可以通过设置inherit来很容易的实现。这可能很有用。比如，当重写background属性的时候，常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以，与其重新写这些值，你可能仅仅想要考虑中的元素和其父级元素有相同的背景属性，一个inherit值就可以搞定一切——这显然大大的节省了键盘输入。 不幸的是，inherit值在IE6和IE7不被支持（除了用于direction(文字方向)和visibility属性）。 某人说，代码就像女人的裙子——越短越好，看来IE会阻碍我们这个愿望的实现。 3、Empty-Cells 该属性只用于table或者”display”属性被设置为”table-cell”的元素。如果你动态的为一个table添加内容，就可能会遇到某个单元格的内容为空的情况，然后你又不希望这个空的单元格的边框、背景色、背景图片等隐藏掉。 使用“empty-cells: hide”就能解决这个问题，它会将可能出现这种情况的单元格完全隐藏掉。 Internet Explorer不支持empty-cells属性。 4、Caption-Side 说到table的属性，这个属性用于声明显示在表格的侧栏的表格标题。它接受top、bottom、left 和right 四个值。Internet Exporer不支持这个属性，table的标题在IE6和IE7中将总是出现在表格的顶部。 5、Counter-Increment/Counter-Reset 有序列表(&#60;ol&#62;)非常方便，因为它可以省去你手工添加递增数字的麻烦，而且它允许你不用更改数字就能改变列表的序列。 CSS 拥有counter-increment和counter-reset属性，它允许你用来自动生成递增数字到几乎所有的HTML元素上，就像有序列表的效果一样。 这里有个示例： 1 2 h2 {counter-increment: headers;} h2:before {content: counter(headers) ".";} 上面的样式将在所有的&#60;h2&#62;标签前面自动添加递增的数字，而且允许你在h2标签上实现和li标签同样的的效果。 但是IE6,IE7甚至Safari(直到3.x版本)还不支持这些属性。当然，IE6也不支持:before伪元素。 6、Min-Height 有时，一个网站的设计或布局结构需要一个有固定高度的内容区域，否则特定的视觉效果就会丢掉。这可能会因为一个渐变背景、一个独特的下拉列表、或者可能是因为PS出来的很酷的发光效果。但是有的时候，页面中的内容会比较多，而页面却不能像预期那样展开。 这个时候就需要用到min-height属性了，因为它可以告诉浏览器在一个特定的块级元素上渲染最小的高度，不管内容的实际高度是否达到了这个最小高度。然后呢，如果内容超出了最小高度，该元素就会适度的扩展开。 使用min-height唯一需要注意到的是它在IE6中不被支持。我们都知道IE6在（缓慢的）退出历史舞台，但是有的客户可能仍然要求他们的网站支持这个该死的浏览器。 不过令人高兴的是，IE6渲染height的值的方法正好和其它浏览器渲染“min-height”的方式一样，所以你只需要一个针对IE6的hack或独立的样式表来为该元素添加特定的height，这个问题就解决了。 IE6同样无视min-width、max-height和max-width，但是上述方法在这些属性上也是可行的。 7、:hover 从技术上来说，:hover只是一个伪类，但是它在IE6中不被支持（IE7和IE8支持）。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用，可以避免(至少在某种程度上)使用JavaScript。 但是如果你的网站，需要完全支持IE6，特别是在中国这种IE6一手遮天的情况下，那么你就必须考虑取消使用这个伪类，除非相关的标签有个”hred”属性，比如&#60;a&#62;标签。而且如果要实现这种效果，可能必须借助于javascript和额外的样式。 8、Display Display通常被设置为这三个值中的一个：block、inline和none。“得益于”IE，Display的其它值很少被用到。这些值包括inline-block、table、inline-table和table-cell等，这些属性对于解决一些特殊的布局问题时，是很有用的。 所以，尽管IE确实支持Display的这三个基本属性，但是它基本上不支持其它属性。 [...]]]></description>
		<wfw:commentRss>http://www.uiorz.com/2009/07/26/%e4%b8%80%e4%ba%9bie%e6%b5%8f%e8%a7%88%e5%99%a8%e4%b8%8d%e6%94%af%e6%8c%81%e7%9a%84%e5%be%88%e6%9c%89%e7%94%a8css%e5%b1%9e%e6%80%a7/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS中的滑动门技术 导航栏背景跟随鼠标滑动</title>
		<link>http://www.uiorz.com/2009/03/15/css%e4%b8%ad%e7%9a%84%e6%bb%91%e5%8a%a8%e9%97%a8%e6%8a%80%e6%9c%af-%e5%af%bc%e8%88%aa%e6%a0%8f%e8%83%8c%e6%99%af%e8%b7%9f%e9%9a%8f%e9%bc%a0%e6%a0%87%e6%bb%91%e5%8a%a8/</link>
		<comments>http://www.uiorz.com/2009/03/15/css%e4%b8%ad%e7%9a%84%e6%bb%91%e5%8a%a8%e9%97%a8%e6%8a%80%e6%9c%af-%e5%af%bc%e8%88%aa%e6%a0%8f%e8%83%8c%e6%99%af%e8%b7%9f%e9%9a%8f%e9%bc%a0%e6%a0%87%e6%bb%91%e5%8a%a8/#comments</comments>
		<pubDate>Sun, 15 Mar 2009 09:57:05 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[滑动门]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/?p=316</guid>
		<description><![CDATA[   纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。同样，我们甚至可以为每一个图像加上alt属性，对于弱视者，纯文本更可以自由的改变大小。不足为奇的是，基于纯文本的导航栏，并加以CSS样式，又重新回到Web设计中来。但是，大多数基于CSS的导航栏设计，至今为止仍然是毫无意义的。一种最近被采用的技术（例如CSS）可以让我们做的更好，同样不失先前提到的那些表格和图片标签的效果。]]></description>
		<wfw:commentRss>http://www.uiorz.com/2009/03/15/css%e4%b8%ad%e7%9a%84%e6%bb%91%e5%8a%a8%e9%97%a8%e6%8a%80%e6%9c%af-%e5%af%bc%e8%88%aa%e6%a0%8f%e8%83%8c%e6%99%af%e8%b7%9f%e9%9a%8f%e9%bc%a0%e6%a0%87%e6%bb%91%e5%8a%a8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>如何跨浏览器使用连续字符的换行</title>
		<link>http://www.uiorz.com/2008/12/22/%e5%a6%82%e4%bd%95%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e4%bd%bf%e7%94%a8%e8%bf%9e%e7%bb%ad%e5%ad%97%e7%ac%a6%e7%9a%84%e6%8d%a2%e8%a1%8c/</link>
		<comments>http://www.uiorz.com/2008/12/22/%e5%a6%82%e4%bd%95%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e4%bd%bf%e7%94%a8%e8%bf%9e%e7%bb%ad%e5%ad%97%e7%ac%a6%e7%9a%84%e6%8d%a2%e8%a1%8c/#comments</comments>
		<pubDate>Mon, 22 Dec 2008 12:42:16 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[字符换行]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/?p=141</guid>
		<description><![CDATA[来自：怿飞 最近就遇到了在页面连续输入英文字符不换行的问题，怎么都不能很彻底的解决，看怿飞的博客总是能解决问题！原文如下： 由于连续的字符（字母、符号、数字）在默认情况下是不换行的，可能会破坏整个界面布局。 那如何解决这个问题呢？ 在 IE 和 Safari 1.3+ 下相对比较容易解决，使用 CSS 属性 word-wrap: break-word;。有朋友会问为什么不是使用 word-break:break-all; ，因为有一个特殊的情况，该属性无法解决换行——连续的英文标点符号。 注：word-break 主要使用在 CJK 文本，即：中文（Chinese）、日文（Japanese）、韩文（Korean）。 而 Firefox 和 Opera 浏览器，无法识别 word-wrap: break-word; 和 word-break:break-all; 属性。可以通过脚本给连续字符的每个字符之间插入 \ u8203 的字符（该字符在非 IE 浏览下不占据空间），使连续变为了不连续，达到了换行的效果。 breakWord = function(dEl){     var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);     var node,s,c = String.fromCharCode('8203');     [...]]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/12/22/%e5%a6%82%e4%bd%95%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e4%bd%bf%e7%94%a8%e8%bf%9e%e7%bb%ad%e5%ad%97%e7%ac%a6%e7%9a%84%e6%8d%a2%e8%a1%8c/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>hack总结</title>
		<link>http://www.uiorz.com/2008/12/19/hack%e6%80%bb%e7%bb%93/</link>
		<comments>http://www.uiorz.com/2008/12/19/hack%e6%80%bb%e7%bb%93/#comments</comments>
		<pubDate>Fri, 19 Dec 2008 07:46:53 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[hack]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/?p=95</guid>
		<description><![CDATA[转自五月阳光 以前的那片丢掉了，补转一篇，偶是剽窃高手&#8230;正文如下 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) &#60;style&#62; #wrapper{ width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } &#60;/style&#62; 2, IE6/IE77对FireFox 1. *+html 与 *html 是IE特有的标签, firefox 暂不支持. 而*+html 又为 IE7特有标签. &#60;style&#62; #wrapper{ #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper [...]]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/12/19/hack%e6%80%bb%e7%bb%93/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>div+css做有背景渐变的圆角矩形</title>
		<link>http://www.uiorz.com/2008/06/28/divcss%e5%81%9a%e6%9c%89%e8%83%8c%e6%99%af%e6%b8%90%e5%8f%98%e7%9a%84%e5%9c%86%e8%a7%92%e7%9f%a9%e5%bd%a2/</link>
		<comments>http://www.uiorz.com/2008/06/28/divcss%e5%81%9a%e6%9c%89%e8%83%8c%e6%99%af%e6%b8%90%e5%8f%98%e7%9a%84%e5%9c%86%e8%a7%92%e7%9f%a9%e5%bd%a2/#comments</comments>
		<pubDate>Sun, 29 Jun 2008 02:56:36 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[导航]]></category>
		<category><![CDATA[渐变圆角矩形]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/2008/06/28/divcss%e5%81%9a%e6%9c%89%e8%83%8c%e6%99%af%e6%b8%90%e5%8f%98%e7%9a%84%e5%9c%86%e8%a7%92%e7%9f%a9%e5%bd%a2/</guid>
		<description><![CDATA[我在找一个页面内切换效果的时候，发现导航按钮代码很有意思，我自己演变成做网页内有背景渐变的圆角矩形版块。 比如做一个宽400PX高30PX有上下渐变的圆角矩形 切图： 把圆角巨型2边切成宽15PX，高30PX，中间切1PX高30PX DIV代码： &#60;div class=&#8221;left&#8221;&#62; &#60;span class=&#8221;right&#8221;&#62; &#60;div class=&#8221;mid&#8221;&#62;&#60;/div&#62; &#60;/span&#62; &#60;/div&#62; 这里我对CSS进行中文解释 left：设置宽400PX，高30PX，插入左边背景，让背景靠左，不重复 right：设置宽400PX，高30PX，插入左边背景，让背景靠右，设置成块，不重复 mid：设置宽370，高30PX，左右边界设为15PX，插入中间的背景横向重复 *如果中间背景高度就20PX有用，哪就切宽1PX，高20PX，和MID设置一样，但必须让背景靠顶部 大家可以试一下希望能帮助上大家]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/06/28/divcss%e5%81%9a%e6%9c%89%e8%83%8c%e6%99%af%e6%b8%90%e5%8f%98%e7%9a%84%e5%9c%86%e8%a7%92%e7%9f%a9%e5%bd%a2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS圆角导航的两种不同构建方法</title>
		<link>http://www.uiorz.com/2008/06/27/css%e5%9c%86%e8%a7%92%e5%af%bc%e8%88%aa%e7%9a%84%e4%b8%a4%e7%a7%8d%e4%b8%8d%e5%90%8c%e6%9e%84%e5%bb%ba%e6%96%b9%e6%b3%95/</link>
		<comments>http://www.uiorz.com/2008/06/27/css%e5%9c%86%e8%a7%92%e5%af%bc%e8%88%aa%e7%9a%84%e4%b8%a4%e7%a7%8d%e4%b8%8d%e5%90%8c%e6%9e%84%e5%bb%ba%e6%96%b9%e6%b3%95/#comments</comments>
		<pubDate>Fri, 27 Jun 2008 06:38:10 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[圆角导航]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/2008/06/27/css%e5%9c%86%e8%a7%92%e5%af%bc%e8%88%aa%e7%9a%84%e4%b8%a4%e7%a7%8d%e4%b8%8d%e5%90%8c%e6%9e%84%e5%bb%ba%e6%96%b9%e6%b3%95/</guid>
		<description><![CDATA[简单的两种CSS圆角导航构建方法，简单，但是细节部分还是需要注意下...]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/06/27/css%e5%9c%86%e8%a7%92%e5%af%bc%e8%88%aa%e7%9a%84%e4%b8%a4%e7%a7%8d%e4%b8%8d%e5%90%8c%e6%9e%84%e5%bb%ba%e6%96%b9%e6%b3%95/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>正确的使用margin:0 auto与body{text-align:center;}实现元素居中</title>
		<link>http://www.uiorz.com/2008/06/27/%e6%ad%a3%e7%a1%ae%e7%9a%84%e4%bd%bf%e7%94%a8margin0-auto%e4%b8%8ebodytext-aligncenter%e5%ae%9e%e7%8e%b0%e5%85%83%e7%b4%a0%e5%b1%85%e4%b8%ad/</link>
		<comments>http://www.uiorz.com/2008/06/27/%e6%ad%a3%e7%a1%ae%e7%9a%84%e4%bd%bf%e7%94%a8margin0-auto%e4%b8%8ebodytext-aligncenter%e5%ae%9e%e7%8e%b0%e5%85%83%e7%b4%a0%e5%b1%85%e4%b8%ad/#comments</comments>
		<pubDate>Fri, 27 Jun 2008 06:33:11 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[margin]]></category>
		<category><![CDATA[text-align]]></category>
		<category><![CDATA[居中]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/2008/06/27/%e6%ad%a3%e7%a1%ae%e7%9a%84%e4%bd%bf%e7%94%a8margin0-auto%e4%b8%8ebodytext-aligncenter%e5%ae%9e%e7%8e%b0%e5%85%83%e7%b4%a0%e5%b1%85%e4%b8%ad/</guid>
		<description><![CDATA[body{text-align:center}与margin:0 auto的异同？这是一个对齐上的迷惑，刚开始的时候或许大家对它们都不是很理解。我们通过下面的一些小例子来了解他们到底有什么区别，应该在什么样的情形下正确的使用body{text-align:center}与margin: 0 auto]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/06/27/%e6%ad%a3%e7%a1%ae%e7%9a%84%e4%bd%bf%e7%94%a8margin0-auto%e4%b8%8ebodytext-aligncenter%e5%ae%9e%e7%8e%b0%e5%85%83%e7%b4%a0%e5%b1%85%e4%b8%ad/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>清除浮动&#8220;clear:both;&#8221;的应用</title>
		<link>http://www.uiorz.com/2008/06/27/%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8clearboth%e7%9a%84%e5%ba%94%e7%94%a8/</link>
		<comments>http://www.uiorz.com/2008/06/27/%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8clearboth%e7%9a%84%e5%ba%94%e7%94%a8/#comments</comments>
		<pubDate>Fri, 27 Jun 2008 06:29:01 +0000</pubDate>
		<dc:creator>Gary</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[学习]]></category>
		<category><![CDATA[clear:both]]></category>

		<guid isPermaLink="false">http://www.uiorz.com/2008/06/27/%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8clearboth%e7%9a%84%e5%ba%94%e7%94%a8/</guid>
		<description><![CDATA[点击这里阅读]]></description>
		<wfw:commentRss>http://www.uiorz.com/2008/06/27/%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8clearboth%e7%9a%84%e5%ba%94%e7%94%a8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
