zoukankan      html  css  js  c++  java
  • DIV浮动IE文本产生3象素的bug

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

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

    測试的浏览器:IE7、IE8



    浏览器的标准模式与怪异模式两种械,怎样区分这两种模式?
    加上<!DOCTYPE html>是标准模式,反则去掉是怪异模式(杂项模式)
    调用下面JS代码来推断属于那种模式:
    console.log(window.top.document.compatMode) ;
    //BackCompat  表示怪异模式
    //CSS1Compat  表示标准模式

    CSS:

      #box {
         600px;
        height:100px;
        margin:100px auto;
        background:blue;
      }
      #left {
        float: left;
         50%;
        height:100px;
        background:red;
      }
      #right {
         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请作用






  • 相关阅读:
    RF操作execl
    fiddler 设置代理以后不能访问网络的解决办法
    Eclipse没有Web插件和JavaEE插件咋整
    mysql 分页查询的标准写法
    java读写操作
    java 链接mysql
    关于博客
    响应式排版中的基础知识
    前端性能优化最佳实践
    HTTP必知必会
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/7236356.html
Copyright © 2011-2022 走看看