Feb 3

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

admin , 02:07 , 默认分类 , 评论(0) , 引用(0) , 阅读(112) , 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) , 阅读(81) , 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) , 阅读(95) , 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居中。
Jan 29

浏览器兼容HACK 不指定

admin , 15:00 , 默认分类 , 评论(0) , 引用(0) , 阅读(73) , Via 本站原创
CSS代码在IE6,IE7和FF中的识别2009-08-01 下午 01:59CSS hack：针对IE6，IE7，firefox显示不同效果

做网站时经常会用到，衡量一个DIV+CSS架构师的水平时，这个也很重要。

区别不同浏览器的CSS hack写法：
区别IE6与FF：
        background:orange;*background:blue;

区别IE6与IE7：
        background:green !important;background:blue;

区别IE7与FF：
        background:orange; *background:green;

区别FF，IE7，IE6：
        background:orange;*background:green !important;*background:blue;


注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6 IE7 FF * √ √ × !important × √ √


------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

IE6 IE7 FF


> * √ √ × !important × √ √ _ √ × ×


于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

Jan 27

margin：0 auto；和 text-align：center； 不指定

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

<div style="width:800px;background:#ddd;text-align:center">
         <p>width:800px;background:#ddd;<b>text-align:center</b></p>
          <div style="margin:0 auto;width:400px;background:#d5d"><b>margin:0 auto;</b>width:400px;background:#d5d</div>
          <div style="width:400px;background:#fdd">width:400px;background:#fdd</div>
          <span>258</span>
     </div>
       <div style="width:800px;background:#bbb;text-align:left">
        <p>width:800px;background:#ddd;text-align:left</p>
          <div style="margin:0 auto;width:400px;background:#d5d">width:800px;background:#ddd;text-align:left</div>
          <div style="width:400px;background:#fdd">width:400px;background:#fdd</div>
          <span style="margin:0 auto;">span:margin:0 auto;</span>
     </div>

IE6跟火狐的区别,IE的text-align:center能使其包含的块状元素和行内元素以及文本内容居中.
而在火狐下面text-align:center只能使其包含的行内元素和文本内容居中.
margin:0 auto能使块状元素居中,但不能使行内元素居中,这个在火狐和IE6下都是一样的.对于IE6以前版本的浏览器需要配合其父元素的text-align:center才能居中.
分页： 5/7 第一页 上页 1 2 3 4 5 6 7 下页 最后页 [ 显示模式： 摘要 | 列表 ]