一阁 » Css http://www.yigle.net 学习,生活,追求与梦想 Mon, 19 Jul 2010 05:09:03 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 IE8 hover&opacity bug http://www.yigle.net/2009/08/ie8-hoveropacity-bug.html http://www.yigle.net/2009/08/ie8-hoveropacity-bug.html#comments Tue, 25 Aug 2009 18:17:46 +0000 rong179 http://www.yegle.cn/?p=35975 今天改网页时遇到的问题：


ul{width:206px;filter:alpha(opacity=80);border:1px solid #000; }
li{height:20px;line-height:20px;}
li:hover{background-color:#CCC;}
a{color:#666;}
<ul>
<li><a href="#">dsfsadfsdfsd</a></li>
<li><a href="#">dsfsadfsdfsd</a></li>
<li><a href="#">dsfsadfsdfsd</a></li>
<li><a href="#">dsfsadfsdfsd</a></li>
</ul>

示例网页

当hover元素父级、爷级…设置透明度时，hover元素浏览变的很卡，而且经过元素时还可能不改变背景色。

原来我以为是js编写影响效率的问题，后来精简代码发现IE8这个lj

我尝试让li获得layout不过行不通，但当用position:relative;时似乎修复bug了，不过透明度又没了。。。

示例网页

不知道有没有好办法解决？最后还是决定去除opacity，改用背景透明图片，毕竟ie 滤镜不是个省事的东西，考虑兼容性及加载问题，改用JS实现over效果，

也许你会喜欢

]]> http://www.yigle.net/2009/08/ie8-hoveropacity-bug.html/feed 0 当position:relative遇到overflow:auto http://www.yigle.net/2008/11/e5-bd-93positionrelative-e9-81-87-e5-88-b0overflowauto.html http://www.yigle.net/2008/11/e5-bd-93positionrelative-e9-81-87-e5-88-b0overflowauto.html#comments Sun, 23 Nov 2008 02:57:20 +0000 rong179 http://yegle.yo2.cn/articles/%e5%bd%93positionrelative%e9%81%87%e5%88%b0overflowauto.html
测试页面

解决方法：很简单,为包含块添加属性，position:relative,这种方法似乎很完美，因为不会产生什么附加效果，不过当包含块不...]]> IE7/6bug:

    在non-quirks 模式下设置position:relative;的元素A当被一带有overflow:auto/scroll属性的块级元素包含时,表现出postion:fixed的特性：
滚动包含块的滚动条，A
元素固定不动；当包含块不足以包含A时，A会
超出包含块外。

预览效果

测试页面

解决方法：很简单,为包含块添加属性，position:relative,解决页面.

这种方法似乎很完美，因为不会产生什么附加效果，不过当包含块不希望设置这一属性时就麻烦了，比如在IE6中模拟position:fixed时。

也许你会喜欢

]]> http://www.yigle.net/2008/11/e5-bd-93positionrelative-e9-81-87-e5-88-b0overflowauto.html/feed 0 Activating Browser Modes with Doctype http://www.yigle.net/2008/11/activating-browser-modes-with-doctype.html http://www.yigle.net/2008/11/activating-browser-modes-with-doctype.html#comments Sun, 23 Nov 2008 01:59:47 +0000 rong179 http://yegle.yo2.cn/articles/activating-browser-modes-with-doctype.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h...]]>  Activating Browser Modes with Doctype

1.Standards mode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.

可以通过临时向页中添加以下客户端脚本（该脚本在最新版本的 Internet Explorer、Firefox 和 Opera 中有效）确定浏览器的当前呈现模式。

<script type="text/javascript"> alert( document.compatMode ); </script>

也许你会喜欢

]]> http://www.yigle.net/2008/11/activating-browser-modes-with-doctype.html/feed 0 Css Hack http://www.yigle.net/2008/11/css-hacks-feedback.html http://www.yigle.net/2008/11/css-hacks-feedback.html#comments Sat, 22 Nov 2008 20:49:50 +0000 rong179 http://yegle.yo2.cn/articles/%e5%87%a0%e4%b8%aa%e5%b8%b8%e7%94%a8hack.html 查看 Css Hack>>
请在下方反馈错误，或者提交新Hack信息

也许你会喜欢

]]> http://www.yigle.net/2008/11/css-hacks-feedback.html/feed 0 web标准常见问题整理 http://www.yigle.net/2008/11/web-standard-questions-finishing.html http://www.yigle.net/2008/11/web-standard-questions-finishing.html#comments Sat, 15 Nov 2008 10:41:53 +0000 rong179 http://yegle.yo2.cn/articles/web%e6%a0%87%e5%87%86%e5%b8%b8%e8%a7%81%e9%97%ae%e9%a2%98%e6%95%b4%e7%90%86.html
2.overflow不管用？has layout （float）

3.margin 重叠？]]> 遇到问题集合，不断更新。。。

1.相对定位，在改变窗口大小时错位，让body也相对定位！

2.IE6，overflow不管用？has layout （float）

3.margin 重叠？

5.图片下方有空隙 。

设置img 为display:block，或者定义vertical-align属性值，
还可以设置父容器的字体大小为零（！opera）.

另外可尝试下line-height ：100%；Add 2008-11-28

6. IE6 绝对定位元素，相对其contexting box 不正确？has layout 2008-11-27

7.inline-block for ff2-:-moz-inline-stack and -moz-inline-box

http://www.planabc.net/2007/03/11/display_inline-block/

http://www.thismuchiknow.co.uk/?p=7

8.min-height for IE 6;iE6下设置height即可，因为高度会被撑开。2008-11-27

也许你会喜欢

]]> http://www.yigle.net/2008/11/web-standard-questions-finishing.html/feed 0 line-height IE中的一点问题 http://www.yigle.net/2008/10/line-height-ie-e4-b8-ad-e7-9a-84-e4-b8-80-e7-82-b9-e9-97-ae-e9-a2-98.html http://www.yigle.net/2008/10/line-height-ie-e4-b8-ad-e7-9a-84-e4-b8-80-e7-82-b9-e9-97-ae-e9-a2-98.html#comments Wed, 29 Oct 2008 05:39:55 +0000 rong179 http://yegle.yo2.cn/articles/line-height-ie%e4%b8%ad%e7%9a%84%e4%b8%80%e7%82%b9%e9%97%ae%e9%a2%98.html
但当单行元素设置浮动时，在ie中似乎有点小问题

问题一： <html>
<body>
<style type="text/css">
body{font-size:14px;}
ul{overflow:hidden;height:...]]> 对于单行元素设置垂直居中，我们经常通过将line-height设置成和其父级元素相同大小来实现。

但当单行元素设置浮动时，在ie中似乎有点小问题

问题一：

<html>
<body>
<style type="text/css">
body{font-size:14px;}
ul{overflow:hidden;height:24px;border:1px solid #ccc;line-height:24px;}
li{list-style:none;float:left;}/*去掉float再试一下*/
</style>
<body>
<ul>
<li>校长在线</li>
</ul>
</body>
</html>

就可以看到当设置float时，在ie中元素有1px的偏下 。暂且可以通过设置*margin-top:1px;解决。

问题二：

<html>
<body>
<style type="text/css">
body{font-size:14px;}
ul{overflow:hidden;height:24px;border:1px solid #ccc;line-height:14px;}
li{list-style:none;float:left;}/*去掉float再试一下*/
</style>
<body>
<ul>
<li>校长在线</li>
</ul>
</body>
</html>

可以看到“校长在线”上部也有1px的隐藏，可以通过vertial-align:bottom;解决。

原来认为上面的两个问题有什么联系，可实验了一下，似乎并没什么联系。当line-height,和字高相等时就会出现第二个问题，当line-height大于字高时第二个问题就不存在了。

也许你会喜欢

]]> http://www.yigle.net/2008/10/line-height-ie-e4-b8-ad-e7-9a-84-e4-b8-80-e7-82-b9-e9-97-ae-e9-a2-98.html/feed 0 类目之间竖线添加的方法 http://www.yigle.net/2008/10/e7-b1-bb-e7-9b-ae-e4-b9-8b-e9-97-b4-e7-ab-96-e7-ba-bf-e6-b7-bb-e5-8a-a0-e7-9a-84-e6-96-b9-e6-b3-95.html http://www.yigle.net/2008/10/e7-b1-bb-e7-9b-ae-e4-b9-8b-e9-97-b4-e7-ab-96-e7-ba-bf-e6-b7-bb-e5-8a-a0-e7-9a-84-e6-96-b9-e6-b3-95.html#comments Tue, 28 Oct 2008 05:44:56 +0000 rong179 http://yegle.yo2.cn/articles/%e7%b1%bb%e7%9b%ae%e4%b9%8b%e9%97%b4%e7%ab%96%e7%ba%bf%e6%b7%bb%e5%8a%a0%e7%9a%84%e6%96%b9%e6%b3%95.html 原以为类目之间的竖线添加无非三种方法：

1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。

3、a标签...]]>

 原以为类目之间的竖线添加无非三种方法：

1、背景图
在a标签设置一个padding 用宽1px高不等的背景图来position到右侧。
缺点：最后一个还是要用class来隐藏掉背景。

2、符号
在每个a标签之间用”|”符号来填充。
缺点：html文件变大，文件维护变得很麻烦，而且在html中毫无意义。

3、a标签右侧的boder。
同背景图一样，只不过使用border-right来代替。缺点也同上。

在淘宝首页看到的方法：

利用ul的overflow:hidden 再将li的margin-left:-1px实现。这样的做法就可以同时避免以上的缺点了。注意，li的line-height要和字高相等。

也许你会喜欢

]]> http://www.yigle.net/2008/10/e7-b1-bb-e7-9b-ae-e4-b9-8b-e9-97-b4-e7-ab-96-e7-ba-bf-e6-b7-bb-e5-8a-a0-e7-9a-84-e6-96-b9-e6-b3-95.html/feed 1 css选择符 http://www.yigle.net/2008/10/css-e9-80-89-e6-8b-a9-e7-ac-a6.html http://www.yigle.net/2008/10/css-e9-80-89-e6-8b-a9-e7-ac-a6.html#comments Sat, 18 Oct 2008 02:43:28 +0000 rong179 http://yegle.yo2.cn/articles/css%e9%80%89%e6%8b%a9%e7%ac%a6.html css选择符参考]]> css选择符参考

也许你会喜欢

]]> http://www.yigle.net/2008/10/css-e9-80-89-e6-8b-a9-e7-ac-a6.html/feed 0 CSS优先级问题 http://www.yigle.net/2008/10/css-e4-bc-98-e5-85-88-e7-ba-a7-e9-97-ae-e9-a2-98.html http://www.yigle.net/2008/10/css-e4-bc-98-e5-85-88-e7-ba-a7-e9-97-ae-e9-a2-98.html#comments Fri, 17 Oct 2008 00:16:03 +0000 rong179 http://yegle.yo2.cn/articles/css%e4%bc%98%e5%85%88%e7%ba%a7%e9%97%ae%e9%a2%98.html 关于specificity的具体计算在各种情况下的数字加成，形式是 0,0,0,0

直接写在标签上的样式优先级为1,0,0,0
例如像这样的样式<div style="font-size:2em">标签</div&g...]]>  参考自：《Web标准设计》作者：aoao（略有改动）
论坛讨论：http://bbs.blueidea.com/thread-2816822-1-1.html

首先就是CSS规则的specificity（特殊性），CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终以计算出来的值决定。
关于specificity的具体计算在各种情况下的数字加成，形式是 0,0,0,0

  • 直接写在标签上的样式优先级为1,0,0,0
    例如像这样的样式<div style="font-size:2em">标签</div>
  • 每个ID选择符(#someid)，加 0,1,0,0
    为什么说每个呢？如果像这样的选择符#selAbout #nav{ …}　就是0,2,0,0了。
  • 每个class选择符(.someclass)、每个属性选择符(形如[attr=""]等)、每个伪类(形如:hover等)加0,0,1,0
  • 每个元素或伪元素(:firstchild)等，加0,0,0,1
  • 其他选择符包括全局选择符*，加0,0,0,0。

按这些规则将数字串逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较，例如：

<style type="text/css" media="all">
*{color:yellow}
h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/* 后者胜出 */
h1.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/
h1#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */
/* 后者胜出 */
</style>

<body>
<h1 class="grape" id="answer">csssssssssssssss</h1>
</body>

除了这个specificity外，还有一些影响的因素：

  • 有!important声明的规则高于一切。
  • 如果!important声明冲突，则比较优先权。
  • 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
  • 由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
  • 关于由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。

也许你会喜欢

]]> http://www.yigle.net/2008/10/css-e4-bc-98-e5-85-88-e7-ba-a7-e9-97-ae-e9-a2-98.html/feed 0 (X)HTML Strict 下的嵌套规则 http://www.yigle.net/2008/09/xhtml-strict-e4-b8-8b-e7-9a-84-e5-b5-8c-e5-a5-97-e8-a7-84-e5-88-99.html http://www.yigle.net/2008/09/xhtml-strict-e4-b8-8b-e7-9a-84-e5-b5-8c-e5-a5-97-e8-a7-84-e5-88-99.html#comments Mon, 29 Sep 2008 06:58:14 +0000 rong179 http://yegle.yo2.cn/articles/xhtml-strict-%e4%b8%8b%e7%9a%84%e5%b5%8c%e5%a5%97%e8%a7%84%e5%88%99.html 下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

  • 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
  • 小写的单词表明一组或一系列 HTML 标签
  • 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本 内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于 flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。
  • #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 &auml; 和 &#228;）
  • CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
  • excluding ... 意即不得直接或者间接的包含所列的元素
    ...
]]> 转自:http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html
作者：JunChen Wu

 

 

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 <a> 里面再嵌入一个 <a> 这样的约定。

说明：

  • 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 <html> 而不应是 <HTML>）
  • 小写的单词表明一组或一系列 HTML 标签
  • 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本
    内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。对于
    flow，inline，block，OBJECT 和 BODY，其内部允许包含的内容在文中会单独给出。

  • #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 &auml; 和 &#228;）
  • CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
  • excluding … 意即不得直接或者间接的包含所列的元素

图：嵌套规则

注1. 以上内容基于 [HTML 4.01 Specification] 的 Strict DTD。JunChen 翻译自 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)

注2. 对于 XHTML 1.0，基本上一致，不同点如下：

  • 对于 <script> 和 <style> 的内容，在 HTML 4 里是 CDATA 而在 XHTML 里是 #PCDATA
  • 在 XHTML 中，<table> 标签后可以紧跟一个 <tr>，而在 HTML 4.01 里，不允许这样，不过 <tbody> 标签又是可以省略的。意思就是说，如果代码中的 <table> 后紧跟 <tr>，对于 HTML 4.01，会隐性的生成一个 <tbody> 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

也许你会喜欢

]]> http://www.yigle.net/2008/09/xhtml-strict-e4-b8-8b-e7-9a-84-e5-b5-8c-e5-a5-97-e8-a7-84-e5-88-99.html/feed 2