描写叙述: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. Leetcode 476.数字的补数

    数字的补数 给定一个正整数,输出它的补数.补数是对该数的二进制表示取反. 注意: 给定的整数保证在32位带符号整数的范围内. 你可以假定二进制数不包含前导零位. 示例 1: 输入: 5 输出: 2 解 ...

  2. EOJ Monthly 2018.3

    985月赛我只喜欢ECNU.jpg A. 打工时不可能打工的 Time limit per test: 2.0 seconds Memory limit: 256 megabytes 我 Ayano ...

  3. 【java基础 16】抽象类和接口的区别

    导读:前两天闲着没事儿,看了本书,然后写了点代码,在接口里面写了默认方法实现,因为书上说这个特性是从java8开始的,我还特地给测了一下java7. 没过几天,就有一个技术分享会,刚好也是讲java8 ...

  4. [Err] 1022 - Can't write; duplicate key in table '#sql-1500_26'

        今天用powerdesigner修改了一些外键关系,有两个外键的名字取一样的,忘记改了.然后在用navicat运行sql文件时,报出[Err] 1022 - Can't write; dupl ...

  5. 【bzoj3261】最大异或和 可持久化Trie树

    题目描述 给定一个非负整数序列 {a},初始长度为 N.       有M个操作,有以下两种操作类型:1.A x:添加操作,表示在序列末尾添加一个数 x,序列的长度 N+1.2.Q l r x:询问操 ...

  6. volatile的用法

    在再有人问你Java内存模型是什么,就把这篇文章发给他中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronized ...

  7. 【FFT】学习笔记

    首先,多项式有两种表示方式,系数表示和点值表示 对于两个多项式相乘而言,用系数表示进行计算是O(n^2)的 而用点值表示进行计算是O(n)的 那么我们自然就会去想如果把系数表示的多项式转化为点值表示的 ...

  8. javaweb学习总结(十四)——JSP原理(转)

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  9. mfc对话框嵌入Flash的交互(转)

    原文转自 http://blog.csdn.net/yacper/article/details/5021081 研究Flash嵌入游戏中的可行性....... 渲染问题已解决 事件响应已解决 下面是 ...

  10. unix网络编程第四章----基于TCP套接字编程

    为了执行网络I/O操作.进程必须做的第一件事情就是调用Socket函数.指定期待的通信协议 #include<sys/socket.h> int socket(int family,int ...