<?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>哈哈小老虎&#039;s Blog &#187; CSS</title>
	<atom:link href="http://www.mytcer.com/category/css/feed" rel="self" type="application/rss+xml" />
	<link>http://www.mytcer.com</link>
	<description></description>
	<lastBuildDate>Sat, 31 Dec 2011 15:42:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>IE对外部资源的解析bug</title>
		<link>http://www.mytcer.com/773</link>
		<comments>http://www.mytcer.com/773#comments</comments>
		<pubDate>Sun, 17 Oct 2010 12:04:55 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[外部资源解析bug]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=773</guid>
		<description><![CDATA[在IE6，7，8中（经测试，IE9 beta2下无此问题），如果link载入了一个html文档（通常发生在目标资源不存在时，服务器端重定向到了404页面），那么文档中的内联样式，可能会作用于父页面中的相应元素。 一. bug的出现条件（下列条件需同时满足） 1. 父页面中，link的rel设置为”stylesheet”； 2. link载入的子页面中含有内联样式，且有选择子与父页面中的元素匹配，如果父页面中存在针对同一元素的样式，选择子的优先级要高于父页面； 3. 子页面中，发生匹配的样式，其前面必须有其他的样式语句（同一个style标签中），如果仅此一句，是不会影响到父页面的。 二. 示例（直接看demo） // 父页面 &#60;!DOCTYPE html&#62; &#60;html&#62; &#60;head&#62; &#60;meta charset="gbk" /&#62; &#60;title&#62;标题&#60;/title&#62; &#60;link rel="stylesheet" href="child.htm" /&#62; &#60;/head&#62; &#60;body&#62; &#60;div id="test"&#62;&#60;span&#62;我是什么颜色&#60;/span&#62;&#60;/div&#62; &#60;/body&#62; &#60;/html&#62; // 子页面 &#60;!DOCTYPE html&#62; &#60;html&#62; &#60;head&#62; &#60;meta charset="gbk" /&#62; &#60;title&#62;标题&#60;/title&#62; &#60;/head&#62; &#60;body&#62; &#60;style&#62; /* 如果去掉body这一句，就不会影响父页面了 */ body {background: #fff;} /* 匹配父页面中的选择子 */ #test [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/773/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE7中浮动元素无法自动换行的bug</title>
		<link>http://www.mytcer.com/680</link>
		<comments>http://www.mytcer.com/680#comments</comments>
		<pubDate>Thu, 27 May 2010 13:42:26 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[自动换行]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=680</guid>
		<description><![CDATA[项目中，一不留神就碰到了这个bug，虽未找到根本原因，但还是先和大家分享一下。。。 一. 重现bug 重现条件：当一个容器中的所有子元素被浮动，未显示的设置子元素宽度，且将元素设置为溢出隐藏，我们来看看具体的code： // html： &#60;ul&#62; &#60;li&#62;我是第一项&#60;/li&#62; &#60;li&#62;我是第二项二项&#60;/li&#62; &#60;li&#62;我是第三项三项三项&#60;/li&#62; &#60;li&#62;我是第四项四项四项四项&#60;/li&#62; &#60;/ul&#62; // css： * { margin: 0; padding: 0; } ul { width: 400px; overflow: hidden; margin: 20px auto; padding: 10px; font-size: 14px; border: 1px solid red; } ul li { display: inline; float: left; overflow: hidden; // 未设置宽度时，这哥们会导致bug white-space: nowrap; border: 1px solid [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/680/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>被relative吓傻的overflow</title>
		<link>http://www.mytcer.com/579</link>
		<comments>http://www.mytcer.com/579#comments</comments>
		<pubDate>Mon, 05 Apr 2010 10:16:33 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE bug]]></category>
		<category><![CDATA[overflow]]></category>
		<category><![CDATA[relative]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=579</guid>
		<description><![CDATA[一. bug自述 我不会随便吓唬人：我只吓IE6, 7； 我的出场费也蛮高哦：给父元素A显示设定一个高度，并设置overflow（3个属性值均会失效），然后将其子元素B（inline的，block的，都可以哦）设置为相对定位。 如果这些你都能做到（你是怎么做到的？），那么：hi，很高兴认识你！ 二. bug真人秀 &#60;div&#62;&#60;p&#62;哇，淫荡的真人秀终于开始咯，好期待哦！！！&#60;/p&#62;&#60;/div&#62; div { width: 200px; height: 100px; overflow: auto; border: 1px solid #36c; } div p { position: relative; height: 200px; background: #ccc; } // 此时，p元素完全溢出，即使设置div的overflow为hidden也是如此 三. bug生活照 四. 如何fix？ （1）给div设置position: relative，但这依然要确保div的父元素不会出现同样的情况。 五. 相关文章 （1）position:relative and overflow in Internet Explorer（老外遇到相同的问题）]]></description>
		<wfw:commentRss>http://www.mytcer.com/579/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>inline-block: 浮动，让我来拯救你！</title>
		<link>http://www.mytcer.com/427</link>
		<comments>http://www.mytcer.com/427#comments</comments>
		<pubDate>Tue, 26 Jan 2010 14:35:47 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[inline-block]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=427</guid>
		<description><![CDATA[浮动有个比较有趣的问题: 当被浮动的元素排列成多行时(多于1行)，如果它们的高度不相同，则整个布局会被打乱(浮动布局崩溃的demo)。但有的时候，需要高度自适应，这个时候，浮动已无法胜任，也许你想到了表格，但从语义的角度来看，表格不一定适用，我想到了inline-block&#8230; 一. 解决办法 &#60;ul&#62; &#60;li&#62;我是第一个&#60;/li&#62; &#60;li&#62;我是第二个我是第二个我是第二个我是第二个我是第二个我是第二个我是第二个&#60;/li&#62; &#60;li&#62;我是第三个&#60;/li&#62; &#60;li&#62;我是第四个&#60;/li&#62; &#60;li&#62;我是第五个&#60;/li&#62; &#60;li&#62;我是第六个&#60;/li&#62; &#60;/ul&#62; &#60;style&#62; ul { width: 630px; margin: 10px auto; overflow: hidden; } ul li { /* FF 2及更低版本不作考虑 */ display: inline-block; width: 200px; /* 我打算设置10px的右边距, 但非IE下, inline-block后, 元素已默认带有4px的右边距 */ margin: 10px 6px 0 0; vertical-align: top; background: #ccc; *display: inline; *zoom: 1; *margin-right: 10px; [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/427/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>IE6,7中, 图片导致超链接失效的bug</title>
		<link>http://www.mytcer.com/46</link>
		<comments>http://www.mytcer.com/46#comments</comments>
		<pubDate>Sat, 28 Nov 2009 15:35:20 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[图片导致链接失效]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=46</guid>
		<description><![CDATA[一. bug症状 点击包含图片的超链接, 页面并不跳转, 若图片与超链接之间存在空白, 点击空白处, 页面会跳转; 但却会响应鼠标事件. 二. bug出现的场景 a元素内嵌套一层或多层内联元素, 最终的内联元素包含一个img元素, 这时, 如果触发了a元素以内的, img元素的任何一个父元素的hasLayout, 那么超链接将失效. 三. 例子 &#60;a href="url"&#62;&#60;span&#62;&#60;img src="pic url" alt="msg" /&#62;&#60;/span&#62;&#60;/a&#62; /* 假设图片的尺寸为100 × 100, a 的样式可以忽略 */ a { display: block; width: 100px; height: 100px; /* 这句需要加上, 当bug出现时, 超链接默认的手形图标会消失 */ cursor: pointer; } a span { /* 只要触发hasLayout, 就可以看到这个bug, 如: float, [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/46/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>用多class来区分IE6</title>
		<link>http://www.mytcer.com/42</link>
		<comments>http://www.mytcer.com/42#comments</comments>
		<pubDate>Sat, 28 Nov 2009 15:20:04 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[多class解释bug]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=42</guid>
		<description><![CDATA[一. 测试环境: 浏览器: IE6+, FF 3+, Chrome 4, Safari 4, Opera 10 二. 例子 &#60;div class="a b"&#62;IE6看到黑色, 其他浏览器看到红色&#60;/div&#62; /* 针对其他浏览器, IE6中, 该句等价于div.b {color: red;} */ div.a.b { color: red;} /* IE6中, 用这句进行覆盖 */ div.b { color: black;} 三. 说明 1. IE6看到黑色, 其他浏览器看到红色; 2. 非IE6中, .a.b的优先级与.a .b的优先级是一样的.]]></description>
		<wfw:commentRss>http://www.mytcer.com/42/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE6对多class的解释bug</title>
		<link>http://www.mytcer.com/39</link>
		<comments>http://www.mytcer.com/39#comments</comments>
		<pubDate>Sat, 28 Nov 2009 15:10:50 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[IE6]]></category>
		<category><![CDATA[多class解释bug]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=39</guid>
		<description><![CDATA[一. 什么是多class? 多class是指形如”.class1.class2&#8243;这样的css选择子. 二. 症状描述 IE6会把多个class当作单个对待, 且只会识别最后一个class, 如: .class1.class2相当于.class2. 三. 例子 &#60;p class="info note"&#62;你好&#60;/p&#62; &#60;p class="into"&#62;我好&#60;/p&#62; &#60;p class="note"&#62;他好&#60;/p&#62; .info.note {clor: red;} 在浏览器中的结果 (1) IE6中, 第1个段落和第3个段落中的文本显示为红色; (2) 其他浏览器及IE7+中, 仅第1个段落中的文本显示为红色. 四. 一点小思考 事物都有两面性, IE6的这一bug, 也可以当作一个hack来使用, 借以区分IE6和其他浏览器.]]></description>
		<wfw:commentRss>http://www.mytcer.com/39/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

