2. 程式人生 > >瀏覽器相容性經典問題（一） IE6 下雙邊距問題

瀏覽器相容性經典問題（一） IE6 下雙邊距問題

阿新 • • 發佈：2019-01-19

問題描述：

        一個div盒子如果設定了margin，並且該div設定了float浮動，那麼在IE6下便會產生雙邊距問題：如果設定 float:left 那麼左邊距會是原來margin的兩倍；如果是float:right，那麼右邊距會是原來margin的兩倍。

        程式碼如下：

    <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>

如下是各瀏覽器的效果圖（左側為chrome  中間為firefox  右側是IE6）：

        從上面圖中可以看到，最右側的IE6的左邊距是原本邊距的2倍。

解決方法：

        在2004年以前，IE6這個雙邊距問題一直沒有得到一種很好的解決方法，普遍的做法是把邊距設定為目標邊距的1/2，以錯對錯的方法去實現。2004年之後，有一個工程師發現了一個簡單的解決方法，到現在也是一直用這個方法來消除IE6雙邊距問題的。方法很簡單：只需要給id為box的這個div加上一條簡單的css程式碼就夠了。

解決程式碼：

 <html>
              <head>
                      <style>
                            body{
                                    margin:0px;
                                    padding:0px;
                            }
                            #box{
                                    _display:inline;
                                    float:left;
                                    margin:10px;
                                    width:200px;
                                    height:200px;
                                    background:#696969;
                            }
                      </style>
              </head>
              <body>
                       <div id="box"></div>
              </body>
    </html>


 如下是IE6的測試效果圖：


備註：

        只需要加上"   _display:inline;   "就可以了。 因為在IE7以及IE7以上的IE版本中，這個雙邊距的bug已經修正，字首符號"_"只有IE6能夠識別，所以只需要讓IE6去設定這個屬性就足以。 

相關推薦

瀏覽器相容性經典問題（一） IE6 下雙邊距問題

問題描述：         一個div盒子如果設定了margin，並且該div設定了float浮動，那麼在IE6下便會產生雙邊距問題：如果設定 float:left 那麼左邊距會是原來margin的兩倍；如果是float:right，那麼右邊距會是原來margin的兩倍。

Skynet服務器框架（一） Linux下的安裝和啟動

進行 harbor 的人 新源 中心 -a 編譯 加載模塊 問題 根據雲風博客的描述，Skynet 的核心功能就是解決一個問題： 把一個符合規範的 C 模塊，從 動態庫（so文件）中啟動起來，綁定一個永不重復（即使模塊退出）的數字id做為其 handle。模塊 被稱為

（一）Windows下安裝RabbitMQ服務

百度網盤 http lang gin 配置 ble localhost 語言 load 一：安裝RabbitMQ需要先安裝Erlang語言開發包，百度網盤地址：http://pan.baidu.com/s/1jH8S2u6。直接下載地址：http://erlang.org/

java程式設計師菜鳥進階（十三）linux基礎入門（一）vmvare下安裝linux RedHat圖解（超詳細篇）

對於linux，我從大二就想學習一下，但一直苦於無從下手，所以一直拖到現在，鑑於筆者瞭解很多人在linux入門的困難在何處，所以我認為本套入門基礎文章還是挺適合想學習linux的朋友，本系列文章大約十篇文章左右，近期會不斷更新下來，沒有linux基礎但又想學習linux的朋友可以關注一下本系列

瀏覽器相容性問題（IE9+）

1. 預設margin、padding不一致     解決： * {margin: 0;padding: 0;} 2. css3的animation     解決： IE9不支援 3. display: flex   &

Elasticsearch筆記（一）—— Linux下安裝Elasticsearch

Linux下安裝Elasticsearch 1、版本 雖然眼下已經出了v6.5.0，但為了和ik分詞器版本一致，這裡選擇6.4.3的版本。 官網：https://www.elastic.co/ 選擇適用於linux的安裝包進行下載 2、安裝與配置 2.1.新建使用者

ubuntu 18.04下greenplum安裝筆記（一）Linux下基礎環境的搭建

背景 需要構建一個用於資料倉庫的分散式資料庫叢集。 每一個節點暫時不需要進行備份，同時也不考慮壞掉的情況。 每一個數據節點最好都不用進行過多的配置，安裝起來方便。 Greenplum的Shared-Nothing的設計思路很適合我目前的業務場景。 物理環境 4檯安裝了Linux的主機，安裝的作業系統的版本均為

OpenVPM系列圖文教程之（一）—— Windows下搭建服務端、客戶端配置

背景：公司移動APP需要使用吶網服務，就順便研究了一下各種搭建方式，廢話不說看教程！ 本文測試環境 雲香港 ECS 1 核 1GB （新人2折） Windows server 2012 R2 Datacenter Intel® Xeon® CPU

ThinkPHP學習（一） Windows下Nginx+PHP5+ThinkPHP 3 2 1的安裝與配置

                工具原料：Nginx153：網盤下載地址：http://pan.baidu.com/s/1qWNgLf2php-5.3.28-nts-Win32-VC9-x86網盤下載地址：http://pan.baidu.com/s/1pdukYThinkPHP_3.2.1網盤下載地址：ht

Eclipse Che安裝體驗（一）----Windows下docker的安裝

最近在研究Eclipse Che，其中需要用到Docker，這裡是我安裝Docker的過程，當然，Eclipse Che的安裝需要用到的還有git,git安裝教程比較多，我們docker的安裝也在已經安裝了git的基礎上進行的。 (一) 關於docker Docker在wi

RabbitMQ教程（一） ——win7下安裝RabbitMQ

驗證RabbitMQ是否安裝成功，在CMD命令視窗輸入： C:\Windows\system32>rabbitmq-service 如出現以上命令的解釋，則說明安裝成功； 然後安裝服務，開啟cmd窗體，進入D:\Program Files\RabbitMQ Server\rabbitmq_serve

（一）.w10下用Hyper-v安裝linux虛擬機器

新建linux虛擬機器： 1）右鍵選擇 新建->虛擬機器 2）起個名稱然後下一步 3）選擇第一代下一步 4）根據自己需求分配記憶體，我自己學習用本機12g，所以我分配了2G記憶體 5）事先有配置好的網路介面卡，可以直接選擇，也可以

OpenVPN 系列圖文教程之（一）—— Windows下搭建VPN服務端、客戶端配置

背景：公司移動APP需要使用VPN服務，就順便研究了一下各種VPN的搭建，突然發現買個阿里雲香港伺服器自己用也是不錯的選擇哈哈，廢話不說看教程！ 本文測試環境 阿里雲香港 ECS 1 核 1GB(簡約型 t1, ecs.t1.small) 領取優惠

ElasticSearch學習 - （一）windows下安裝ElasticSearch

ElasticSearch版本6.5.4;要求jdk版本必須為1.8以上 1、從官網下載elasticsearch 地址：https://www.elastic.co/downloads/elasticsearch 2、解壓zip到檔案目錄 3、開啟ElasticSearch

Caffe學習筆記（一）——Windows 下caffe安裝與配置

本文主要介紹：經過一番周折，在Windows7 64位系統下成功配置Caffe，下面總結一下基本的配置過程，以及配置過程中遇到的問題。 配置環境：Windows7 X64 + CUDA7.0 + VS2013 + Matlab2014a 1.安裝C

JSP自定義標籤（一） 樹形下拉選擇選單

<tag>       <name>selector</name>       <tag-class>com.moonNigh.tagSupport.SelectorTag</tag-class>       <body-content&

android5.1 藍芽子系統介紹（一）Android下bluedroid、bluetooth apk介紹

前言本文件主要介紹android平臺下bluetooth的應用層軟體，先介紹bluetooth應用層的框架，接著分別介紹Bluedroid層軟體、Bluetooth應用程式（Bluetooth.apk），Bluetooth framework層，最後完整分析一些藍芽的操作流程。基於android 5.1的平臺

現代瀏覽器的模型（一）

exec 博客園 event avi 處理 理解 新浪 als utf 本文開始逐漸了解現代瀏覽器的模型，搞清楚了瀏覽器大略是怎麽回事，能極大促進理解前端js語言和框架的種種特點。 以下先收集文章，待後續理解整理後再來寫： http://davidshariff.c

Haskell（一 ） ------ Windos下環境配置

步驟 去官網下載安裝包 然後執行安裝包路徑最好就不要改了。 開啟命令列輸入 cabal user-config init 會出現預設的放置配置檔案的地址，然後到那個資料夾下修改config檔案。新增

PullScrollView進階（一）----->圖片下拉回彈

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.