2010/02 归档 - 武冈论坛官方博客 - 武冈论坛团队博客,提供网站技术,网站优化,网站重建CSS,标准中国。

Feb 11

关于vertical-align:middle

admin , 09:41 , 默认分类 , 评论(25) , 引用(0) , 阅读(1500) , Via 本站原创

大多数人可能认为,设置元素的vertical-align:middle可以让行内元素在父元素中垂直居中,但在网页开发中发现不是这样,我最近参考了w3c的标准发现,middle值会把行内元素框的中与与父元素基线上方0.5ex处的一个点对齐,这里的1ex也是相对于父元素定义. 以下是制作的一个图,供大家了解.

Feb 11

滑动TAB切换代码

admin , 07:57 , 默认分类 , 评论(1) , 引用(0) , 阅读(733) , Via 本站原创

Feb 3

块转换内联，内联转换为块

admin , 02:07 , 默认分类 , 评论(0) , 引用(0) , 阅读(537) , Via 本站原创

不浮动，用内敛盒子

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>
<style type="text/css">

</style>
</head>
<body>
<DIV class="nav">
  <UL>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=154" >文秘</A></LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=155" >接待</A> </LI>
    <LI><a href="{$InstallDir}Department/ShowClass.asp?ClassID=156" >信息</a> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=157" >通信</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=158" >治安</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=159" >档案</A> </LI>
    <LI><A href="{$InstallDir}Department/ShowClass.asp?ClassID=160" >后勤</A> </LI>
  </UL>
</DIV>
</body>
</html>

块转换内联盒子的话，display:inline;zoom:1;
display是转换了内联了，但是他里面也包块，块是会换行的，所以内联里面控制不了块，必须zoom 激发IE的HS属性，这样就模拟出内联盒子了，可以包含块了。

内联转内联盒子，很容易，直接 inline-block 激发了 HS

Feb 3

IE6BUG总结

admin , 01:42 , 默认分类 , 评论(0) , 引用(0) , 阅读(396) , Via 本站原创

1超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

2IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

3IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

4IE6文字溢出BUG
说明：注释造成文字溢出是IE的BUG。

5一个空格引发CSS失效
这段代码对

的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

6IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

7IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

Feb 3

div的未知高度文字垂直居中

admin , 01:27 , 默认分类 , 评论(0) , 引用(0) , 阅读(1950) , Via 本站原创

<!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>无标题文档</title>
    <style type="text/css">
    div {
      height: 200px;
      border: 1px solid;
    }
    span, b {
      display: inline-block;
      vertical-align: middle;
    }
    b {
      height: 100%;
    }
    </style>
</head>
<body>
  <div>
    <span>HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br /></span>
    <b style="border:1px solid red">1</b>
  </div>
</body>
</html>

1，因为要考虑到IE6，所以不用display: table-cell的方式。
2，因为你说文字的内容不固定，所以可能产生换行，所以不用height = line-height的方式。

给span, b设置display: inline-block，目的是为了让它们在div里是以一行的方式呈现。再给b设置高度100%，让它占满div里的一行，而前面的span就可以自动补白，同样占满这一行。最后设置vertical-align: middle，让span居中。

分页： 2/3

1 2 3

[ 显示模式：摘要 | 列表 ]

武冈论坛官方博客

关于vertical-align:middle

滑动TAB切换代码

块转换内联，内联转换为块

IE6BUG总结

div的未知高度文字垂直居中

分类

日历

统计

最新日志

最新评论

链接

归档

其他

< 2010 > < 2 >
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28