<optgroup id="mqeky"><code id="mqeky"></code></optgroup>
  • 139-6504-8393

    CSS 常見問題和解決方案

    錄入編輯:明圖網絡 | 發布時間:2021年11月02日

    1、如何定義高度很小的容器?

    在IE6下無法定義小高度的容器,是因為有一個默認的行高。
    列舉2種解決方案:ovoverflow:hidden | line-height:0

    2、圖片下方出現幾像素的空白間隙?

    這個也有多種解決方案,如將img定義為display:block,或定義父容器為font-size:0,個人更推薦使用vertical-align的方式,它的值可以是text-top | text-bottom | middle等

    3、IE6雙倍margin的BUG?

    display:inline

    4、文本垂直方向對齊文本輸入框?

    設置input為vertical-align:middle,textarea也是如此

    5、為什么在web標準下ie無法設置滾動條的顏色?

    將設置滾動條顏色的樣式定義到html標簽選擇符上即可

    6、如何讓層在falsh上顯示?

    不可以,除了少數幾個級別很高的家伙除外。
    但可以將flash設置為透明,這時層就會透過falsh顯示,近似于覆蓋在flash之上了,如:
    <param name="mode" value="transparent" />

    7、如何使得文字不換行?

    定義包含文字的容器為:width:xxx;white-space:nowrap;

    8、ie中如何讓超出寬度的文字顯示為省略號?

    定義容器為:overoverflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

    9、如何在點文字時也選中checkbox?

    <input id="test" type="checkbox" value="on" /> <label for="test">測試 </label>

    10、一個div為margin-bottom:10px,一個div為margin-top:5px,為什么2個div之間的間距是10px而不是15px?

    這種情況瀏覽器會自動進行margin重疊,只顯示較大的margin值
    解決方案:只設置其中一個div的margin為15px

    11、如何解決ie下當li中出現2個或以上的浮動時,li之間產生的空白間隙?

    設置li的vertical-align,值可以為top | text-top | middle | bottom | text-bottom

    12、如何使得英文單詞不發生詞內斷行?

    word-wrap:break-word;

    13、為什么被訪問過的鏈接顏色沒有變化?

    定義鏈接的樣式時,需要按照:link,:visited,:hover,:active這樣的順序,可以使用LoVe HAte(喜歡討厭)來記憶

    14、單行文本如何垂直居中?

    height:xxx;line-height:xxx; 高和行高相同即可

    15、已知高度的容器如何在頁面中水平垂直居中?

    參閱:http://blog.doyoe.com/article.asp?id="74"

    16、未知尺寸的圖片圖如何水平垂直居中?

    參閱:http://blog.doyoe.com/article.asp?id="159"

    17、標準模式和怪異模式下的盒模型區別?

    標準模式下:實際寬度 = width + padding + border
    怪異模式下:實際寬度 = width - padding - border

    18、如何解決IE下的3像素BUG?

    參閱:http://blog.doyoe.com/article.asp?id="68"

    19、如何做1像素細邊框的table?

    方法1:設置table的border-collapse:collapse;
    <style type="text/css">
    table{border-collapse:collapse;border-color:#000;}
    td{border-color:#000;}
    </style>
    <table cellspacing="0" cellpadding="0" border="1">
    <tr>
    <td>測試 </td>
    <td>測試 </td>
    </tr>
    </table>

    方法2:關鍵在于設置cellspacine="1",用間隙來作為邊框
    <style type="text/css">
    table{background:#000;}
    tr{background:#fff;}
    </style>
    <table cellspacing="1" cellpadding="0" border="0">
    <tr>
    <td>測試 </td>
    <td>測試 </td>
    </tr>
    </table>

    20、以圖換字的幾種方法及優劣分析

    以圖換字,其實是為了保證頁面的可讀性,這樣既有利于搜索引擎,又有利于結構查看。由于這種方式被大多數人所認同,所以方法也越來越多:

    方法1:使用text-indent的負值,將內容移出容器;
    方法2:使用display:none,將內容隱藏;
    方法3:使用padding將文字擠出容器之外,并將超出的部分hidden;
    方法4:使用font設置超小字體,達到隱藏內容的目的。

    方法1(非常不推薦)看起來蠻簡單,但其實有幾個不理想的地方,1是比較吃資源;2是在ie5下面會出現滯后背景無法顯示;3是內容為超鏈接時,長長的黑色虛框,讓你抓狂。
    方法2(不推薦)其實倒也不復雜,只是需要多添加一個標簽,比較浪費;且display:none出現的幾率太多,對seo也是會有些許影響的。
    方法3(推薦)Standard Model下要2層標簽才能搞定,不過相對方法1和2還是有優勢的,推薦一下。
    方法4(強烈推薦)只需要將字體設置為0,然后overflow:hidden;如font:0/0 arial;overflow:hidden;就同樣可以達到隱藏內容的目的,暫時還沒發現有什么副作用,強烈推薦。

    21、如何容器透明,內容不透明?

    假設在標準模式下有如下結構:
    <div class="outer">
    <p class="inner">我不要透明 </p>
    </div>

    IE only的方法:在父容器outer被設置為透明后,只需要將子容器inner設置為position:relative; 如果需要兼容其它瀏覽器,則以上的方法不適用,且結構也需改為:

    <div class="outer"> </div>
    <div class="inner">我不要透明 </div>

    然后使用position + z-index搞定位置

    22、如何去掉鏈接的虛線框?

    IE下: <a href="#" onfocus="this.blur();"...>
    FF下:a{outline:none;}

    23、如何使得頁面字體行距始終保持n倍字體大小為基調?

    在body內設置line-height:n即可,注,不可以為它加上單位
    原因可參閱:http://blog.doyoe.com/article.asp?id="195"

    24、如何使用標準的方法插入flash?

    <div class="fla-show">
    <object type="application/x-shockwave-flash" data="*.swf" width="*" height="*">
    <param name="movie" value="*.swf" />
    <img src="*.jpg" alt="用于不支持flash或屏蔽flash時顯示" />
    </object>
    </div>

    25、Standard Model如何讓容器可以height:100%?

    設置html,body{height:100%;margin:0;}

    26、如何使得表格的寬度固定?

    設置table為table-layout:fixed;這時表格將使用固定布局算法,多出的內容將不影響表格的寬度

    27、如何讓min-height兼容ie6?

    .min-height{min-height:100px;_height:100px;}
    <div class="min-height">我是兼容的min-height </div>

    28、如何讓鼠標變成手型且兼容所有現代瀏覽器?

    cursor:pointer

    29、如何實現ie6下的position:fixed?

    參閱:http://blog.doyoe.com/article.asp?id="188"

    30、IE下如何對Standard Mode與Quirks Mode進行切換?

    IE6以下的瀏覽器不用觸發,直接以Quirks Mode呈現頁面。

    IE6和IE7都可以觸發的(在XHTML 的DTD申明前加上HTML注釋):
    <!--Let ie6 and ie7 into quirks mode-->
    <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->

    IE6的觸發(在XHTML 的DTD申明前加上XML申明):
    <!--l version="1.0" encoding="utf-8-->
    <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->

    當沒有使用DTD聲明或者使用HTML4以下(不包括HTML4)的DTD聲明時,基本所有的瀏覽器都是使用Quirks Mode呈現。

    31、如何給一個元素定義多個不同的css規則?

    <style type="text/css">
    .a{color:#f00;}
    .b{background:#eee;}
    </style>

    <div class="a b">測試 </div>

    如上例,該元素同時擁有a和b定義的樣式規則。
    多個規則之間使用空格分開,并且只有class能同時使用多個規則,id不可以

    32、如何區別display:none與visibility:hidden?

    相同的是display:none與visibility:hidden都可以用來隱藏某個元素;
    不同的是display:none在隱藏元素的時候,將其占位空間也去掉;而visibility:hidden只是隱藏了內容而已,其占位空間仍然保留。


    上一篇:誤操作robots.txt禁止spider抓取如何處理
    下一篇:利用CSS樣式屬性控制讓背景圖片和IMG圖片正常顯示不變形
    熱門服務和內容
  • 明圖微信公眾號

    微信公眾號

  • 合肥小程序制作

    客服微信號

  • 業務咨詢 139-6504-8393

    (7*14小時)8:30-22:30 貼心服務

    合肥市蜀山區長江西路669號拓基城市廣場B座11層

    在線咨詢
    免責聲明:本網站部分數據采集自網絡,如權利人發現存在信息侵權,請及時與本站聯系,我們第一時間處理。 COPYRIGHT ? 合肥明圖網絡科技有限公司 ALL RIGHTS RESERVED 備案編號: 皖ICP備14002487號-3 關于明圖 |
    av自慰在线免费视频观看 松山爱免费av观看在线视频 av视频在线免费观看国产自拍 中文字幕av不卡观看免费 avapp99在线免费视频观看 青草视频新免费观看av在线观看 青草视频新免费观看av大全 av在线观看免费播放器 av日本无码在线免费观看视频