Css常见问题归纳

最新推荐文章于 2023-05-06 11:51:52 发布

hobo陈

最新推荐文章于 2023-05-06 11:51:52 发布

阅读量368

点赞数 1

分类专栏： Css 文章标签： css mozilla xhtml ie div 浏览器

本文链接：https://blog.csdn.net/cjh0043/article/details/4974875

版权

Css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

（－） CSS 常见Hack — CSS hack是指我们为了兼容各浏览器，而使用的特别的css定义技巧。
        //Some Common HACK
       html
       {
           height:30px;               //Effective on all browsers；
            height:30px!important;       //Just Effective on FF ,IE7；
           *height:30px!important;       //Just Effective on IE7；
           *height:30px;               //Just Effective on IE;
           _height:30px;               //Just Effective on IE6;
       }
       //要用*必须保证为以下的DOCTYPE
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（二） Safari hack
        select:empty {font:12px !important;}
       Safari CSS Hack
        p.callout { color:#FF0000; font-weight:normal; }
        p.callout { color:#000000; font-weight:bold;# }
（三）IE的if条件Hack// 这个ＨＡＣＫ在用ul作无序列表菜单的时候很有用—ie6对标签<a>的内嵌内容不识别
       //微软的私有属性条件注释
    Effective on all ie
    Just Effective on IE6
    Just Effective on IE6 , IE5.x
    Just Effective on IE7
（四）  解决ie对png图片透明的支持问题
   #divDemo{
       height: 600px;
       width: 260px;
       padding: 20px;
       background-repeat: repeat;
       _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="bj1.png"
       //_filter：针对IE6的解决ＰＮＧ图片不能透明显示的问题。
       对于这个会引起div中的链接失效的问题可以在链接CSS里设置相对定位，也可以对该内容所在的层进行相对定位设置。
       对于外层已经是绝对定位的div以上的方法还无法解决链接失效的问题，这时可以通过添加层来实现同样的效果。
（五）解决IE6 的浮动元素的双倍边距问题
        对一个div设置了float:left 和 margin-left:40px 那么在IE6中，这个bug就会出现。要解决必须多设置一个display，代码如下：
       .demo   {
           float:left;margin:40px;display:inline;
       }
（六）min-height/min-width/max-height/max-width
        //应用也很广泛，但是这些属性在ie6下是无效，所以要想在多浏览器上实现这种的效果一般要用
           .demo {
           height:30px;

//ie6识别为高度为30px,在ie6下当内容超过这高度时会自动增长高度,ff与ie7下是不会。

            minheght:30px;
       }
(七）通用选择器
   ＊｛
        ｝

(八)单行文本的Div内容垂直居中（Eg:Div.height＝20px）
    #div.middle-demo-1{
       line-height:20px;
              vertical-align:middle
   }
   //这个也可以用Padding:auto不过不同浏览器有不一样的效果还是上面那种比较好,兼容性比较好。
(九)多行文本的Div内容垂直居中且容器高度可变
    //也很简单，给出一致的 padding-bottom 和 padding-top 就行,但是不能固定div的高度。
    #div.middle-demo-2{
       padding-top: 24px;
       padding-bottom: 24px;
   }
(十)Css通用透明效果
        .demo{
       filter:alpha(opacity=12);   //Effective on IE
       -moz-opacity:0.12;           //Effective on FF
       opacity:0.12;
     }

(十一)有时候用Div+CSS布局的网页会由于兼容性的问题使网页在不同的浏览器中显示出不同的效果，很多问题是对盒模型的解析不一样造成的。
    CSS 兼容要点：DOCTYPE 影响 CSS 处理。
    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。
   FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中。
   FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一

          个 height 和 width。
   cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以。
   FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
           参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在

           menubar 中插入一个空格XHTML+CSS兼容性解
           决方案小集

   使用XHTML+CSS构架好处不少，但也确实存在一些问题:
    1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    div{margin:30px!important;margin:28px;}

    2.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    ul{margin:0;padding:0;}
    就能解决大部分问题

   3.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为
    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    <script type="text/javascript">

    4.需要说明的是：IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：
    IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有；
    设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而M ozilla会在宽度基础上加上这个值。

(十二)CSS常见技巧与问题。

   1）为了节省字节我建议不要给背景图片路径加引号，引号不是必须的，
       EG：background：url('imgage/***.gif')可以写成background：url(imgage/***.gif)
       如果加了引号，反而会引起一些浏览器的错误。

   2）用正确的顺序指定链接的样式 :link :visited :hover :active

   3）明确定义值单位，除非值为0或者是行高值。

   4）区分大小写，ＣＳＳ文件中大小写是有区别的，一般建议采用 pascal格式的书写。

   5）对于大型的站点，对样式表进行分割以便简化维护是一种好做法，但每个CSS文件都意味着对服务器进行一次额外的调用，会影响性能。如何分割样式表是需要仔细考虑的。一般建议用一个CSS文件处理基本布局，用另一个文件处理版式和设计修饰，这样的话在布局确定后就基本不需要修改布局样式表防止对布局样式表的意外修改破坏。

   6) ul 标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。

   7）如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性，而不要去定义位于外面的标签的padding。

   8）li 标签前面的图标推荐使用background-image，而不是list-style-image。

   9）如果给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候要给标签再设置一个深色调的背景颜色。因为图片丢失了，也可以保持文字的可读性。

   10）与内容无关的图片一般放在background里。尽量做到表现与内容分离。

   11）用CSS调用外部字体

                 语法：@font-face{font-family:name;src:url(url);sRules}
　　   　取值：
　　   　name：字体名称。任何可能的 font-family 属性的值
　       　url(url)：使用绝对或相对 url 地址指定OpenType字体文件
　       　sRules：样式表定义

    12）FireFox移除超链接的虚线
FireFox下，当你点击一个超链接时会在外围出现一个虚线轮廓。这很容易解决，只需要在标签样式中加入 outline:none。
　       　a{outline: none;}

   13）我的建议是能够尽量使用id做为定义css的选择器，会减少css文件对页面的遍历耗时。

   14）关闭输入法状态：使用户只能输入英文状态下的字符，类似输入密码：

input{ime-mode:disabled;}

(十三)Block和inline元素对比

   所有的HTML元素都属于block和inline之一。
   block元素的特点是：
   总是在新行上开始；
   高度，行高以及顶和底边距都可控制；
   宽度缺省是它的容器的100%，除非设定一个宽度
   <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

   相反地，inline元素的特点是：
   和其他元素都在一行上；
   高，行高及顶和底边距不可改变；
   宽度就是它的文字或图片的宽度，不可改变。
   <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

   用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
   让一个inline元素从新行开始；
   让块元素和其他元素保持在一行上；
   控制inline元素的宽度（对导航条有用）；
   控制inline元素的高度；
   无须设定宽度即可为一个块元素设定与文字同宽的背景色。