描写叙述:DIV浮动IE文本产生3象素的bug    左边对象浮动。右边採用外补丁的左边距来定位,右边对象(div)会离左边有3px的间距

复现:在开发者工具里把文本模式设置了杂项后会出现3像素的bug

測试的浏览器:IE7、IE8

浏览器的标准模式与怪异模式两种械,怎样区分这两种模式?

加上<!DOCTYPE html>是标准模式,反则去掉是怪异模式(杂项模式)。
调用下面JS代码来推断属于那种模式:

console.log(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式

CSS:

  #box {
width: 600px;
height:100px;
margin:100px auto;
background:blue;
}
#left {
float: left;
width: 50%;
height:100px;
background:red;
}
#right {
width: 100%;
height:100px;
background:yellow;
}
*html #left {
margin-right:-3px;
/* 上面这句是重点 */
}

HTML:

<div id="box">
<div id="left">1</div>
<div id="right">|2</div>
</div>

不加margin-left:-3px的效果是:

加margin-left:-3px的效果是:

在CSS样式表中最后一个选择器 *html是什么意思呢?

本人在ie8 ie7浏览器下測试,文本模式选择设置为杂项时。*html请作用

DIV浮动IE文本产生3象素的bug的更多相关文章

  1. 【html】【6】div浮动float

    我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...

  2. Popline:帅气的浮动 HTML5 文本编辑器工具栏

    Popline 是一个基于 HTML5 实现的富文本编辑器工具栏,设计灵感来自 PopClip ,相比传统的文本编辑器工具,Popline 能够浮动在编辑的文本周围,操作起来十分方便. 您可能感兴趣的 ...

  3. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. DIV 浮动存不占空间

    DIV 浮动存不占空间比如<div style="width:80px; border:1px solid #333"><div style="floa ...

  5. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  7. Div 浮动到另一个div之上

    转自原文Div 浮动到另一个div之上 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met ...

  8. 多个div的多文本部分展开显示+关键字自动标注

    效果: 源码: <%@ page language="java" contentType="text/html; charset=utf-8" pageE ...

  9. 如何遍历div里面的文本内容,用each方法,

    如何遍历div里面的文本内容,然后进行匹配传来的数据,进行选中div,并进行CSS样式处理, for(i = 0; i< $(".itemMenuRowBox").child ...

随机推荐

  1. apple苹果产品国行和港行的区别

    [iPhone国行和港行的区别]国行:耳机只能用在苹果设备上,不能用其它设备.充电器不用转接,直接可以用,保修的时候如果换新了,重新计算一年保修期.国行是三网通用.港行:耳机可以用在任何设备上.充电器 ...

  2. Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值

    for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...

  3. Java多线程框架源码阅读之---ReentrantLock

    ReentrantLock基于Sync内部类来完成锁.Sync有两个不同的子类NonfairSync和FairSync.Sync继承于AbstractQueuedSynchronizer. Reent ...

  4. python面向对象、模块讲解

    (1)模块的介绍: 1.什么是模块  模块是一系列功能的集合体  常见的模块形式(自定义模块.第三方模块.内置模块):   1.一个module.py文件就是一个模块,文件名是module.py,而模 ...

  5. layer弹窗在键盘按回车将反复刷新

      条件:弹窗后不做任何点击操作或者聚焦操作对于layer.load,弹出后反复按回车,load层将不断刷新,即使设置了自动消失也只有等不按回车键才会生效.对于layer iframe层有表单就更糟糕 ...

  6. JDBC 学习笔记(二)—— 详解 JDBC 的四种驱动类型

    JDBC 有四种驱动类型,分别是: JDBC-ODBC 桥(JDBC-ODBC bridge driver plus ODBC driver) 本地 API 驱动(Native-API partly ...

  7. 刷题总结——game(hdu4616)

    题目: Nowadays, there are more and more challenge game on TV such as 'Girls, Rush Ahead'. Now, you par ...

  8. dubbo面试题之dubbo-client 和dubbo-server同时配置超时时间,是以哪个为准;

    根据官网表示: 以 timeout 为例,下图显示了配置的查找顺序,其它 retries, loadbalance, actives 等类似: 方法级优先,接口级次之,全局配置再次之. 如果级别一样, ...

  9. poj 6243 Dogs and Cages

    Dogs and Cages Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  10. 【BZOJ1059】矩阵游戏(二分图最大匹配)

    题意:矩阵游戏在一个N*N黑白方阵进行.每次可以对该矩阵进行两种操作: 行交换操作:选择矩阵的任意两行,交换这两行(即交换对应格子的颜色) 列交换操作:选择矩阵的任意行列,交换这两列(即交换对应格子的 ...