Jquery中文網 www.uhadif.co
Jquery中文網 >  CSS教程  >  正文 DIV浮動IE文本出現3px間距的bug

DIV浮動IE文本出現3px間距的bug

發布時間:2019-11-16   編輯:www.uhadif.co
jquery中文網為您提供DIV浮動IE文本出現3px間距的bug等資源,歡迎您收藏本站,我們將為您提供最新的DIV浮動IE文本出現3px間距的bug資源
<script>ec(2);</script>

發生場合:當左邊對象是浮動的,右邊對象采用外補丁的左邊距來定位,則右邊對象內的文本會離左邊有3px的空白誤差。
沒加修正:
運行代碼框

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy9551')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy9551><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}

-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>離左邊3px</p><p>離左邊3px</p></div>
</body>
</html>
</td> </tr> </table>

  [Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運行]
修正過:(加了以下代碼)

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6563')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6563>* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
</td> </tr> </table>

不考慮mac下ie5.02
運行代碼框

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy7362')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy7362><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}
#layout{
background: #F1F1F1;
width: 400px;
float: left;
}
#floatbox {
float: left;
width: 100px;
height: 50px;
background: #6d6;
}
p {
margin: 0 0 0 100px;
background: #dd9;
}
* html #floatbox {
margin-right: -3px;
}
* html p {
height: 1%;
margin-left: 0;
}
-->
</style>
</head>
<body>
<div id="layout"><div id="floatbox">floatbox</div><p>現在沒有3px了</p><p>現在沒有3px了</p></div>
</body>
</html>
</td> </tr> </table></td> </tr> </table>

您可能感興趣的文章:
js頁面滾動時層智能浮動定位實現(jQuery/MooTools)
JQuery浮動DIV提示信息并自動隱藏的代碼
基于JQuery的浮動DIV顯示提示信息并自動隱藏
js隨機漂浮廣告代碼示例
jquery實現的讓超出顯示范圍外的導航自動固定屏幕最頂上
jQuery 瀑布流 浮動布局(一)(延遲AJAX加載圖片)
jQuery powerFloat萬能浮動層下拉層插件使用介紹
css浮動元素的居中的例子
js 居中漂浮廣告代碼
點擊div彈出層的效果代碼舉例

[關閉]
北京pk赛车历史 云南十一选五 2017年还能赚钱的网游 球探网篮球 qq小学生打字赚钱 街机捕鱼千炮版最新 3d捕鱼游戏网站 开元棋牌是个骗局是吗 任选9场奖金最低排名 体彩七星彩开奖结果 全天幸运飞船计划网 零点棋牌一样的棋牌 皇冠即时比分 捷报网球比分 怎样上传百度视频赚钱 真人街机金蟾捕鱼 捕鱼来了免费辅助