zoukankan      html  css  js  c++  java
  • css&html的问题积累

    1、图片垂直居中的使用技巧

    <!doctype html>
    <html>
    <head>
    </head>
    <body>
    <style>
    .box
    {
    *display
    : block;
    *font-size
    : 175px;/*约为高度的0.873,200*0.873 约为175*/
    *font-family
    :Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
    width
    :200px;
    height
    :200px;
    display
    :table-cell;
    vertical-align
    :middle;
    text-align
    :center;
    border
    : 1px solid #eee;
    }
    .box img
    {vertical-align:middle}
    </style>
    <div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/></div>
    </body>
    </html>

    display:table-cell;vertical-align:middle; 对非ie6浏览器可以使用line-height:200px来取代。(注意dtd类型的定义,如果使用Transitional类型line-height将不起作用)

    原文:http://www.planabc.net/2008/05/26/img_vertical_center_solution/

    参考:http://www.student.oulu.fi/~laurirai/www/css/middle/

    2、display:inline-block的兼容问题

    引用:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。但对于这个属性不是所有浏览器都识别。

    支持的浏览器有:Opera、Safari、Firefox3.0

    【情况为内联元素】如a,span,em...

       在IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block

    【情况为块级元素】如div,li,p...

      直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

    div {display:inline-block;*display:inline;zoom:1;}  

    3、selecte,input等value被浏览器缓存解决方法

    使用html属性autocomplete="off"解决!,select需要在form上添加此属性。

    4、word-wrap:break-word

    【ie中的解决办法】table添加属性:word-break:break-all

    【firefox中的解决办法】table添加属性:table-layout:fixed

    5、ie6下right:0px/bottom:0px的1像素bug

    【原因】position:relitave;的容器的width为基数;

    【解决方法】宽度改为偶数

    6、ie6/ie7下background-position:100% 100%的解析bug

    【原因】http://www.brunildo.org/test/BackgroundBorderLayout.html

    【解决方法】增加hack,zoom:1

    7、ie7/ie6 box解析height = border + height 其他height = height - border

    8、ie6 不支持class连写,如.mt-search-type.hover{}

    【ie6解读】ie6将忽略前一个样式,解读为.hover{}

  • 相关阅读:
    P2422 良好的感觉
    拉格朗日插值
    C# 中的委托和事件(详解)
    异步委托
    ManualResetEvent详解
    快速理解C#高级概念事件与委托的区别
    拉格朗日多项式
    oracle 插入一个从别处查询获得字段的值
    decode和nvl的用法
    C#将像素值转换为图片
  • 原文地址:https://www.cnblogs.com/cheche/p/1753971.html
Copyright © 2011-2022 走看看