CSS中常見的bug問題,你應該這樣解決

2021-10-03 15:55:03 字數 2747 閱讀 2300

margin無效(ie5及以下)

最外層div在ie瀏覽器中水平居中,設定margin: 0 auto;無效;

- hack: body中還需要新增text-align: center;
間隙

div中的間隙(該bug出現在ie6以及更低版本中),在div中插入時,會將div下方撐大3個畫素;

- hack1: 將 

和- hack2: 將

- hack3: 給父類新增font-size:0;(不推薦)

- hack4: 給

- hack5: 給

預設高度(例如div)

在ie6以及更低版本中,部分元素擁有預設高度(低於18px高度);

- hack1: 給元素新增宣告,font-size: 0;

- hack2: 給元素新增宣告,overflow: hidden;

百分比bug

在ie7以及更低版本中,在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的 .

hack

:給右邊的浮動元素新增宣告

:clear

: right; // 清除右浮動

清除浮動

:clear

: right; // 清除右浮動

clear

: left; // 清除左浮動

clear

: both; // 清除兩邊的浮動

透明屬性
- ie瀏覽器寫法: filter: alpha(opacity=value); (value取值範圍0~100)

- 相容其他瀏覽器寫法: opacity: value; (value取值範圍0~1)

邊框問題

在ie6以及更低版本瀏覽器中,如果想要去掉預設邊框,需要將border屬性值設定為0,即可以相容多個瀏覽器;

bug: ie6以及更低版本瀏覽器中,border: none;去除不了邊框;

hack: 直接使用border: 0;

按鈕元素預設大小不一
- hack1: 統一大小

- hack2: input外邊套乙個標籤,在這個標籤中寫按鈕的樣式,把input的邊框去掉;

- hack3: 如果這個按鈕是乙個,直接把作為按鈕的背景圖即可;

按鈕解析邊框問題

對於所有瀏覽器都會存在,按鈕解析邊框的問題

> 設定乙個div,乙個按鈕,乙個文字輸入框

> 三個高度寬度都一樣,都將邊框去掉,設定為左浮動

> 三個元素顯示都是一致的

> 問題展示: 三個元素分別加上1px的邊框,此時按鈕顯示會出現差異

原因:

按鈕不管是否新增邊框,它都是存在的,而其他元素新增邊框的時,是新增在元素之外的,這也就導致其他元素都會相對應變大,而按鈕卻沒有任何變化;

解決:

之後出現按鈕和文字框一起出現且高度是一致時,要麼按鈕加上2px,要麼文字框減去2px;

聚焦時外邊框變藍

搜尋輸入框input在360遊覽器(相容模式)下顯示,在獲得焦點時外邊框變藍,而其他ff、ie、google均未變藍,現在需要將網頁中的所有輸入框,都被設計為「獲得滑鼠焦點時外邊框不變藍」。

其實,是由於各個遊覽器的outline預設值不同導致的,解決的方法很簡單,將定義outline屬性為none,將下面的css**加入相對應的選擇器中。outline不會像border那樣影響元素的尺寸或者位置。

hack1: input:focus

hack2: input:focus

表單元素行高不一致
描述:表單元素行高對齊方式不一致

hack : 給表單元素新增宣告:float:left;

列表bug
bug1: 當給li中的a新增float: left; li沒有設定浮動屬性,會出現垂直效果;

hack: 給li設定浮動效果即可;

bug2: 當給li中的a轉為塊元素,並設定固定高度時,li是有浮動的情況下,會出現垂直效果;

hack: 給a標籤新增浮動即可;

bug3: 當給li中的a轉為塊元素,並設定固定高度時,且有新增浮動效果,就會出現階梯狀效果;

hack: 給li中的新增浮動(即li和a都需要新增浮動);

備註:

都不設定寬度,都通過給a設定padding將li撐開;

最小寬高度
語速具備最小寬高度的自適應:ie6及以下版本不識別該屬性

bug1. min-height / min-width : 最小高度(寬度)

bug2. max-height / max-width : 最大高度(寬度)

bug3. height:auto!important;(由內容撐起來)

相容元素具備最小高度自適應的方法:

hack1. min-height:value; _height:value;(過濾器)

對於ie6來說,height本身具有min-height的作用

hack2. min-height:value; height:auto!important; height:value;(建議使用)

iOS 開發中常見的BUG

1.null urgent all bitcode will be dropped because x was built without bitcode.you must rebuild it with bitcode enabled xcode setting enable bitcode ob...

介面測試中常見的bug有哪些?

介面測試常見bug 特殊值處理不當導致程式異常退出或者崩潰 型別邊界溢位,導致資料讀出和寫入不一致 取值邊界外值未返回正確的錯誤資訊 引數 為null或空字串 等 許可權未處理,可以訪問其他使用者的資訊 例如 無許可權可以訪問,或者 一般使用者可以訪問管理員許可權 邏輯校驗不完善,可利用漏洞獲取非正...

專案中常見css檔案應用問題

最近3周的工作中主要是負責和美工樣式的改版,其中不避免的遇到一些套用樣式的時候的問題。下面把問題放出來並解決 通常美工會吧固定的例如background img的url寫成相對路徑,這時候如果用到例如masterpage.master的時候會出現路徑混亂的局面,比如 folder page1.asp...