                        課程
                    
                        /后端開發
                        
                            /Java
                        
                        /使用Struts2+Hibernate開發學生信息管理功能

瀏覽器兼容問題

每個瀏覽器顯示的內容都不一樣，谷歌瀏覽器完美符合，怎么解決呢？

慕粉4382184

2017-06-05

源自：使用Struts2+Hibernate開發學生信息管理功能 2-7

關注問題我要回答

715

操作

收起

1 回答

沖出江湖
2017-06-29

1.居中問題

div里的內容，IE默認為居中，而FF默認為左對齊，可以嘗試增加代碼margin: 0 auto;

2.高度問題

兩上下排列或嵌套的div，上面的div設置高度(height)，如果div里的實際內容大于所設高度，在FF中會出現兩個div重疊的現象；但在IE中，下面的div會自動給上面的div讓出空間所以為避免出現層的重疊，高度一定要控制恰當，或者干脆不寫高度，讓他自動調節，比較好的方法是 height:100%;但當這個div里面一級的元素都float了的時候，則需要在div塊的最后，閉和前加一個沉底的空div，對應CSS是：.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3.clear:both;

不想受到float浮動的，就在div中寫入clear:both;

4.IE浮動 margin產生的雙倍距離

#box {
? ? ? ?float:left;
? ? ? ?width:100px;
? ? ? ?margin:0 0 0 100px; //這種情況之下IE會產生200px的距離
? ? ? ?display:inline; //使浮動忽略
? ?}

5.padding問題

FF設置 padding 后，div會增加 height 和 width，但IE不會（* 標準的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當，或嘗試使用 height:100%;寬度減少使用 padding但根據實際經驗，一般FF和IE的 padding 不會有太大區別，div 的實際寬 = width + padding ，所以div寫全 width 和 padding，width 用實際想要的寬減去 padding 定義。

6.div嵌套時 y軸上 padding和 marign的問題

FF里 y 軸上子div 到父div 的距離為父padding + 子marign
? ?IE里 y 軸上子div 到父div 的距離為父padding 和子marign 里大的一個
? ?FF里 y 軸上父padding=0 且 border=0 時，子div 到父div 的距離為0，子marign 作用到父div 外面

7.padding，marign，height，width的傻瓜式解決技巧

注意是技巧，不是方法：
? 寫好標準頭
? ?<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
? ?<html xmlns=”http://www.w3.org/1999/xhtml”>
? ?高盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準實際要的減去padding

8.列表類

1. ul標簽在FF中默認是有 padding值的，而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}
? 2. ul和ol列表縮進問題消除ul、ol等列表的縮進時，樣式應寫成: {list-style:none;margin:0px;padding:0px;}