IE錛氬皢鏍規嵁鍐呭鐨勯珮搴﹀彉鍖栵紝鍖呮嫭鏈畾涔夐珮搴︾殑鍥劇墖鍐呭錛屽嵆浣垮畾涔変簡楂樺害錛屽綋鍐呭瓚呰繃楂樺害鏃訛紝灝嗕嬌鐢ㄥ疄闄呴珮搴?br>Firefox錛氭病鏈夊畾涔夐珮搴︽椂錛屽鏋滃唴瀹逛腑鍖呮嫭浜嗗浘鐗囧唴瀹癸紝MF鐨勯珮搴﹁В鏋愭槸鏍規嵁鍗板埛鏍囧噯錛岃繖鏍峰氨浼氶犳垚鍜屽疄闄呭唴瀹歸珮搴︿笉絎﹀悎鐨勬儏鍐碉紱褰撳畾涔変簡楂樺害錛屼絾鏄唴瀹硅秴榪囬珮搴︽椂錛屽唴瀹逛細瓚呭嚭瀹氫箟鐨勯珮搴︼紝浣嗘槸鍖哄煙浣跨敤鐨勬牱寮忎笉浼氬彉鍖栵紝閫犳垚鏍峰紡閿欎綅銆?
緇撹錛氬ぇ瀹跺湪鍙互紜畾鍐呭楂樺害鐨勬儏鍐典笅鏈濂藉畾涔夐珮搴︼紝濡傛灉鐪熺殑娌℃湁鍔炴硶瀹氫箟楂樺害錛屾渶濂戒笉鐢ㄤ嬌鐢ㄨ竟妗嗘牱寮忥紝鍚﹀垯鏍峰紡鑲畾浼氬嚭鐜版販涔憋紒
img瀵硅薄alt鍜宼itle鐨勮В鏋?br>alt錛氬綋鐓х墖涓嶅瓨鍦ㄦ垨鑰卨oad閿欒鏃剁殑鎻愮ず錛?br>title錛氱収鐗囩殑tip璇存槑銆?br>鍦↖E涓鏋滄病鏈夊畾涔塼itle錛宎lt涔熷彲浠ヤ綔涓篿mg鐨則ip浣跨敤錛屼絾鏄湪MF涓紝涓よ呭畬鍏ㄦ寜鐓ф爣鍑嗕腑鐨勫畾涔変嬌鐢?/p>
緇撹錛氬ぇ瀹跺湪瀹氫箟img瀵硅薄鏃訛紝鏈鍚庡皢alt鍜宼itle瀵硅薄閮藉啓鍏紝淇濊瘉鍦ㄥ悇縐嶆祻瑙堝櫒涓兘鑳芥甯鎬嬌鐢?/p>
鍏朵粬鐨勭粏鑺傚樊鍒?br>褰撲綘鍦ㄥ啓css鐨勬椂鍊欙紝鐗瑰埆鏄敤float: left錛堟垨right錛夋帓鍒椾竴紿滃浘鐗囨椂錛屼細鍙戠幇鍦╢irefox閲岄潰姝ｅ父鑰孖E閲岄潰鏈夐棶棰樸傛棤璁轟綘鐢╩argin:0,榪樻槸border: 0鏉ョ害鏉燂紝閮芥棤嫻庝簬浜嬨?/p>
鍏跺疄榪欓噷榪樻湁鍙﹀涓涓棶棰橈紝灝辨槸IE瀵逛簬絀烘牸鐨勫鐞嗭紝firefox鏄拷鐣ョ殑鑰孖E瀵逛簬鍧椾笌鍧椾箣闂寸殑絀烘牸鏄鐞嗙殑銆備篃灝辨槸璇翠竴涓猟iv緇撴潫鍚庤绱ф帴鐫涓涓猟iv鍐欙紝涓棿涓嶈鏈夊洖杞︽垨鑰呯┖鏍箋備笉鐒朵篃璁鎬細鏈夐棶棰橈紝姣斿3px鐨勫亸宸紝鑰屼笖榪欎釜鍘熷洜寰堥毦鍙戠幇銆?/p>
闈炲父涓嶈蛋榪愮殑鏄垜鍙堢鍒頒簡榪欐牱鐨勯棶棰橈紝澶氫釜img鏍囩榪炵潃錛岀劧鍚庡畾涔夌殑float: left錛屽笇鏈涜繖浜涘浘鐗囧彲浠ヨ繛璧鋒潵銆備絾鏄粨鏋滃湪firefox閲岄潰姝ｅ父鑰孖E閲岄潰鏄劇ず鐨勬瘡涓猧mg閮界浉闅斾簡3px銆傛垜鎶婃爣絳句箣闂寸殑絀烘牸閮藉垹闄ら兘娌℃湁浣滅敤銆?/p>
鍚庢潵鐨勮В鍐蟲柟娉曟槸鍦╥mg澶栭潰濂條i錛屽茍涓斿li瀹氫箟margin: 0錛岃繖鏍峰氨瑙ｅ喅浜咺E鍜宖irefox鐨勬樉紺哄亸宸侷E瀵逛簬涓浜涙ā鍨嬬殑瑙ｉ噴浼氫駭鐢熷緢澶氶敊璇棶棰橈紝鍙湁澶氬灝濊瘯鎵嶈兘鍙戠幇鍘熷洜銆?/p>
2銆佸祵濂桪IV:鐖禗IV鐨勯珮搴︿笉鑳芥牴鎹瓙DIV鑷姩鍙樺寲鐨勮В鍐蟲柟妗?/font>
<div id="parent">
<div id="content"> </div>
</div>
褰揅ontent鍐呭澶氭椂錛屽嵆浣縫arent璁劇疆浜嗛珮搴?00%鎴朼uto,鍦ㄤ笉鍚屾祻瑙堝櫒涓嬭繕鏄笉鑳藉畬濂界殑鑷姩浼稿睍銆?nbsp;瑙ｅ喅鏂規
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
鍦ㄥ眰鐨勬渶涓嬫柟浜х敓涓涓珮搴︿負1鐨勭┖鏍鹼紝鍙В闄よ繖涓棶棰?/p>
3銆丆SS DIV 瀛︿範絎旇
涓銆佸熀鏈笂姣忎釜鍖哄潡鐨刣iv 閮借鏈夎嚜宸辯殑id錛屾潨緇濅笉鍚屽姛鑳界殑鍖哄潡鐢ㄥ悓涓涓猧d/class
浜屻佹瘡涓◢澶х殑鍖哄潡div 鍚庨潰閮借窡涓涓?lt;!-- /id -->鏍囪寮濮嬨佺粨鏉?/p>
涓夈侀殣钘忔枃瀛楃殑鍙堜竴縐嶆柟娉?nbsp;TEXT-INDENT: -9999px; LINE-HEIGHT: 0
鍥涖佸閥濡欏湴澶勭悊騫跺垪鐨勪袱鍒?
1)
鍙沖垪涓篜, width=44.5%, float=left
宸﹀垪涓篜.first, border-right: #a7a7a7 1px solid, width=45%
2)
鍙沖垪#right, margin-left:50%
宸﹀垪#left, float=left,width=50% border-right:#a7a7a7 1px solid
浠ヤ笂涓ょ鏂規硶鍏抽敭鐐瑰湪浜庨夋嫨鍏朵腑涓涓負float=left
浜斻侀殢鏈虹殑鍒囨崲鍥劇墖錛?br>#random {
BACKGROUND: url(/rotate.php);
}
榪欎釜鏂規硶寰堝閥濡欍?br>
4銆佸叧浜巇iv鐨勯珮搴﹁嚜閫傚簲
銆銆浠婂ぉ灝忓翱璁╂垜甯粬鐨勯〉瀛愯В鍐充竴涓棶棰橈紝灝辨槸div鐨勯珮搴﹁嚜閫傚簲錛屼篃灝辨槸鍦ㄤ竴涓埗綰iv涓祵濂椾竴宸︿竴鍙充袱涓瓙div錛屽彸杈圭殑瀛恉iv鍐呭鍙棤闄愭墿灞曪紝鑰屽彲浠ヤ嬌寰楃埗綰iv鐨勯珮搴﹁兘琚棤闄愭媺闀匡紝鐢ㄤ竴鑸殑甯冨眬鏂規硶錛屽湪IE涓彲浠ユ紜祻瑙堬紝鍦∕ozilla涓埗綰iv鐨勯珮搴﹀氨鍥哄畾鍦?0px宸﹀彸錛屾棤娉曡嚜閫傚簲楂樺害錛宧eight:auto涔熶笉琛岋紝鎬庝箞鍔炲憿銆傜綉涓婂弬鑰冨埌涓綃囪祫鏂欙紝瑕佸疄鐜拌嚜閫傚簲楂樺害錛宒iv灞傚繀欏誨叿鏈塮loat灞炴э紝浜庢槸鎴戝紑濮嬪姩鎵嬭瘯楠岋紝float:left鐨勮瘽錛宒iv灝辮窇鍒伴〉闈㈡渶宸﹁竟鍘諱簡錛岃繖濂藉姙錛屾垜鍦ㄥ畠鐨勫闈㈠啀濂椾竴灞俤iv錛屾妸浣嶇疆瀹氬ソ錛岄偅涔堥噷闈㈢殑灝辯畻float:left涔熶笉浼氳縐誨姩浣嶇疆浜嗐?/p>
xhtml:
==========================================================
<div id="container_father">
<div id="container">
<div id="panel"> test<br />
test<br />
test<br />
<!-- id="panel" -->
</div>
<div id="sidebar">
<ul>
<li class="current">棰勫畨瑁呮鏌?lt;/li>
<li>闃呰 PFC 鎺堟潈鍗忚</li>
<li>鍒濆鍖栨暟鎹簱</li>
<li>瀹屾垚瀹夎</li>
</ul>
<!-- id="sidebar" -->
</div>
<!-- id="container" -->
</div>
</div>
CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}
FRom: http://ulean.zg163.net/
5銆?nbsp; 娣卞叆鏍囧噯 ~ The IE Doubled Float-Margin Bug(IE鍙屽嶆誕鍔ㄨ竟鐣孊ug)
浠涔堝彂鐢熸晠闅滐紵
涓孌墊棤閿欑殑浠ｇ爜鎶婁竴涓眳宸︽誕鍔?float:left)鐨勫厓绱犳斁緗繘涓涓鍣ㄧ洅(box)錛屽茍鍦ㄦ誕鍔ㄥ厓绱犱笂浣跨敤浜嗗乏杈圭晫(margin-left)鏉ヤ護瀹冨拰瀹瑰櫒鐨勫乏杈逛駭鐢熶竴孌佃窛紱匯傜湅璧鋒潵鐩稿綋鐨勭畝鍗曪紝瀵瑰悧錛熶絾鐩磋嚦瀹冭鍦↖E/Win涓祻瑙堜負姝紝鍦ㄦ祻瑙堝櫒涓眳宸︽誕鍔ㄥ厓绱犵殑杈圭晫闀垮害琚縐樺湴緲諱簡涓鍊嶏紒
鎯呭喌搴旇濡備綍錛?/p>
涓嬮潰鐨勫浘閲婂睍紺轟簡涓涓畝鍗曠殑div(鑼惰壊鐨勭洅瀛?鍖呭惈鐫涓涓眳宸︽誕鍔ㄧ殑div(緇胯壊鐨勭洅瀛?銆傛誕鍔ㄥ厓绱犳湁涓涓?00px鐨勫乏杈圭晫錛屼嬌瀹瑰櫒鐩掍笌瀹冪殑宸﹁竟緙樹箣闂翠駭鐢熶簡涓涓?00px鐨勯棿闅欍傚埌鐜板湪涓烘錛屼竴鐩撮兘榪樹笉閿欍?/p>
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
闄堟棫鐨処E“鍙屽嶅崰鎹?#8221;
鍘熸牱鐨勭浉鍚屼唬鐮佽鍦↖E/Win涓祻瑙堟椂浠ヤ簺寰笉鍚岀殑鏂瑰紡鏄劇ず錛屼笅闈㈢殑鍥鵑噴灞曠ず浜咺E/Win鍦ㄥ竷灞涓婃墍鍋氱殑銆?/p>
榪欎負浠涔堜細鍙戠敓錛熷埆闂繖縐嶅偦闂錛佽繖灝辨槸IE錛岃寰楀悧錛熺鍚堟爣鍑嗗彧鏄悊鎯崇殑鐘跺喌錛屼笉鎸囨湜瀹炵幇錛岃繖涓畝鍗曠殑浜嬪疄姝ｉ獙璇佷簡銆?/p>
閲嶇偣
榪欎釜Bug浠呭綋嫻姩杈圭晫鍜屾誕鍔ㄥ厓绱犵殑鏂瑰悜鐩稿悓鏃跺嚭鐜板湪嫻姩鍏冪礌鍜屽鍣ㄧ洅鐨勫唴杈圭紭涔嬮棿錛屽湪榪欎箣鍚庣殑浠繪剰鏈夌潃鐩鎬技杈圭晫鐨勬誕鍔ㄥ厓绱犱笉浼氬憟鐜板弻鍊嶈竟鐣屻傚彧鏈夌壒瀹氱殑嫻姩琛岀殑絎竴涓誕鍔ㄥ厓绱犱細閬亣榪欎釜Bug銆傚儚灞呭乏鐨勬儏鍐典竴鏍鳳紝鍙屽嶈竟鐣屽悓鏍風縐樺湴鏄劇ず鍦ㄥ眳鍙崇殑鐩稿悓鏂瑰紡銆?/p>
鏈鍚庯紝淇鍔炴硶錛?/p>
鐩村埌鐜板湪(04騫?鏈?榪欎釜Bug涓鐩磋璁や負鏄棤娉曚慨澶嶇殑錛岄氬父鐢ㄦ潵鏇夸唬閿欒鐨勮竟鐣岀殑鎺у埗鏂規硶濡傦細涓涓笉鍙嫻姩鍏冪礌鐨勫乏杈硅窛錛岃繛鍚屼竴涓唴宓岀殑鐩掑瓙涓璧鳳紝鍙鐨勭洅瀛愯鍦ㄤ笉鍙嫻姩鍏冪礌閲岋紱鎴栬呬嬌鐢ㄦ妧宸т粎瀵笽E/Win璁懼畾杈圭晫鐨?/2鍊箋傝繖鍔炴硶鐢熸晥浜嗭紝浣嗘槸鏄販涔辯殑鑰屼笖鎼炵碂浜嗗共鍑鐨勬簮浠ｇ爜銆備笉榪囩幇鍦ㄥ叏閮ㄧ粨鏉熶簡銆?/p>
Steve Clason鍙戠幇浜嗕竴涓慨澶嶅姙娉曪紝鎻忚堪鍦ㄤ粬鐨凣uest Demo閲岋紝淇浜嗗弻鍊嶈竟鐣屽拰鍥寸粫鏂囧瓧緙╄繘Bug銆傝繖鏄竴涓粡鍏哥殑IE鐨凚ug淇鍔炴硶錛屼嬌鐢ㄤ竴涓睘鎬ф潵淇褰卞搷涓嶇浉鍏沖睘鎬х殑Bug銆?/p>
鐜板湪濡備綍鏉ュ仛錛?/p>
鐮旂┒瀹冿紝綆鍗曞湴灝唟display: inline;}璁劇疆緇欐誕鍔ㄥ厓绱犲氨鏄叏閮ㄦ墍闇鍋氱殑錛佹槸鐨勶紝鍚搗鏉ュお綆鍗曚簡錛屼笉鏄悧錛熶笉榪囪繖鏄湡鐨勶紝浠呬粎涓涓猟isplay鐨?inline"澹版槑宸茬粡鑳藉鑳滀換浜嗐?/p>
鐔熸倝瑙勫垯鐨勪漢鐭ラ亾嫻姩鍏冪礌鑷姩璁劇疆涓?block"鍏冪礌錛岃屼笉綆′粬浠箣鍓嶆槸浠涔堛傚氨濡係teve浠嶹3C閲屾寚鍑猴細
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
榪欒鏄庢誕鍔ㄥ厓绱犱笂鐨剓display: inline;}浼氳蹇界暐錛屼簨瀹炰笂鎵鏈夌殑嫻忚鍣ㄦ病鏈夊憟鐜頒換浣曟敼鍙橈紝鍖呮嫭IE銆備絾鏄紝瀹冧笉鐭ヤ綍鏁呰IE鍋滄灝嗘誕鍔ㄥ厓绱犵殑杈圭晫緲誨嶃傚洜鑰岋紝榪欎釜淇鍔炴硶鍙互琚洿鎺ュ簲鐢紝鑰屾病鏈変換浣曠箒鐞愮殑闅愯棌鏂規硶銆傚鏋滃皢鏉ョ殑涓嬈炬祻瑙堝櫒鍐沖畾瀵硅繖涓慨澶嶅姙娉曟姳鎭欙紝鍙鎶婅繖涓慨澶嶈鍏E鐙敤鐨凾an Hack閲岋紝緇嗚妭濡傚悓IE Three Pixel Text-Jog Demo銆?/p>
涓嬮潰鏄袱涓嬌鐢ㄤ簡鍓嶉潰鐩稿悓浠ｇ爜鐨勭敓鍔ㄦ紨紺猴紝絎竴涓収甯告樉紺轟簡IE鐨凚ug錛屼笅涓涓嫻姩鍏冪礌浣跨敤浜?inline"淇銆?br>.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
]]>