Feb 3

块转换内联，内联转换为块 不指定

admin , 02:07 , 默认分类 , 评论(0) , 引用(0) , 阅读(535) , 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">
<!--
.nav {
  MARGIN: 0px;
  WIDTH: 100%;
  FONT-FAMILY: verdana;
  HEIGHT: 24px;
  font-family:Arial, Helvetica, sans-serif;
    LINE-HEIGHT: 24px;
}
.nav UL {
  PADDING: 0px;
  DISPLAY: block;
  MARGIN: 0px;
  LIST-STYLE-TYPE: none;
  HEIGHT: 24px;
  BACKGROUND-COLOR: #c5dbf2;
  COLOR: #ffffff;
text-align:center;
}
.nav LI {
  DISPLAY: inline-block;
  *display:inline;*zoom:1;
  HEIGHT: 24px;
  font-family:Arial, Helvetica, sans-serif;
    LINE-HEIGHT: 24px;
  WIDTH: 82px;
  text-align:center;
}
.nav LI A {
  PADDING:1px 15px 0;
  DISPLAY: block;
  FONT-WEIGHT: none;
  COLOR: #000;
  LINE-HEIGHT: 24px;
  TEXT-DECORATION: none;
}
.nav LI A:hover {
  COLOR:#562505;
  BACKGROUND-COLOR: #2687eb;
  TEXT-DECORATION: none;
}
-->
</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) , 阅读(394) , 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) , 阅读(1940) , 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居中。
分页： 1/1 第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]