建站知識

Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

瀏覽器的兼容性問題與解決方案

時間:  來源:網站建設公司  作者:網站制作公司  點擊量:
首先向大家解釋一下什么是瀏覽器的兼容性?所謂瀏覽器兼容性問題,是指因為不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯
首先向大家解釋一下什么是瀏覽器的兼容性?所謂瀏覽器兼容性問題,是指因為不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的兼容性問題是網站建設人員經常會碰到且必須要解決的問題,下面給大家總結一下我們經常會遇到的兼容性問題有哪些:
1.超鏈接訪問過后hover樣式就不出現的問題?
被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A
2.IE6的雙倍邊距BUG
例如:
<style type="text/css">
      body {margin:0}
      div { float:left; margin-left:10px; width:200px; height:200px; border :1px solid red }
</style>
浮動后本來外邊距10px,但IE解釋為20px,解決辦法是加上display:inline
3.為什么FF下文本無法撐開容器的高度?
標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢?辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義:
div { height:auto! important; height:200px; min-height:200px; }
4.為什么web標準中IE無法設置滾動條顏色了?
原來樣式設置:
<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
解決辦法是將body換成html
5.為什么無法定義1px左右高度的容器?
IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
6.怎么樣才能讓層顯示在FLASH之上呢?
解決的辦法是給FLASH設置透明:
<param name="wmode" value="transparent" />
7.怎樣使一個層(塊)垂直居中于瀏覽器中?
<style type="text/css">
<!--
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px;  width:200px; height:200px;  border:1px solid red;}
-->
</style>
用js獲取盒子的寬度,然后讓網頁的總寬度-盒子寬度/2;就得到了left或top;
這里使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二
8、firefox嵌套div標簽的居中問題的解決方法
假定有如下情況:
<div id="a">
      <div id="b"> </div>
</div>
如果要實現b在a中居中放置,一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE里看起來一切 正常;但是在Firefox中b卻會是居左的。
解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為:margin: 0 auto;。
9、css如何讓圖片垂直居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle }
div p { position:static; +position:absolute; top:50% }
img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
10、如何處理png透明度問題。
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/logo.png'); /* IE6 */
_ background-image: none; /* IE6 */
11、如何處理文字本身的大小不兼容。同樣是font-size:14px的宋體文字,在不同瀏覽器下占的空間是不一樣的,ie下實際占高16px,下留白3px,ff 下實際占高17px,上留白1px,下留白3px,opera下就更不一樣了。
給文字設定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要,在高度上我們不能容忍1px 的差異。
12、如何達到容器高度自適應。
<div style="width:200px;  height:auto !important;  height:200px;  min-height:200px; ">
內容
</div>
13、如何解決圖片下方留白的問題。
在寫圖片時建議不要把div后標簽換行;如:<div><img src=...></div>,此標簽不要換行;
好了,暫時實戰是解決問題的最佳途徑,也是遇到問題的唯一途徑,大家在做網站建設的時候,要親自制作才能更快更好的成長,另外多去借鑒別人的經驗也是進步的捷徑!
本文TAG標簽:
返回關閉本頁
上一篇:制作網頁時,CSS背景圖片怎么定位?    下一篇:jQuery鼠標滑過時,彈出登錄框
推薦閱讀

Copyright ? 2010-2021 北京瑞恒天龍科技有限公司  All Rights Reserved  |  北京網站建設知名服務商  |  北京網站制作 | 京ICP備11004170號-1   京公網安備110107000463號
地址:北京市海淀區永定路長銀大廈B座  非工作時間:15810379666  服務熱線:400-600-6204 座機:010-89941606 轉801/802/803/804  版權所有 盜版必究!

在線咨詢
關閉
電話咨詢
網站制作電話
400-600-6204
美女被强奷到高潮娇喘