css 浮动后的元素不论是什么display的都默认是block就是设置inline也是block

IE/6出现双边框的原因

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug。(如果都是一个方向的浮动那么第一个只有双边距,但同时也有右边的浮动,那么也同样是双边距,原理是相对谁浮动的)

解决这个bug有两个方法:

  1. 给float的元素添加一个display:inline (错误!!!) 其实不用加,浮动的元素本身会变成block元素,加了也不会生效
  2. 给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。

本来以为,将display设置为inline后,就改变了BUG产生的条件之一,即必须是块状元素。但是后来又看到了下面这段话:“熟悉规则的人知道浮动元素自动设置为”block”元素,而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。”

参考博客

当一个元素被浮动后,它的display是否会被默认指定为block?的更多相关文章

  1. flex布局控制最后一个元素右浮动

    可以在最后一个元素添加css属性 margin-left: auto; 例如我一排排列的元素 ,子元素并没有完全排列撑开父元素的宽度,这时候要使最后一个元素想最右 可以让最后一个元素的 margin- ...

  2. CSS编辑元素的浮动

    1.元素浮动: 1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right: 2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面:右浮动时,就会附在右侧 ...

  3. jquery层级原则器(匹配前一个元素后的下一个元素,必须是挨着的)

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

  4. 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 信1705-2 软工作业最大重复词查询思路: (1)将文章(一个字符串存储)按空格进行拆分(split)后,存储到一个字符串(单词)数组中。 (2)定义一个Map,key是字符串类型,保存单词;value是数字类型,保存该单词出现的次数。 (3)遍历(1)中得到的字符串数组,对于每一个单词,考察Map的key中是否出现过该单词,如果没出现过,map中增加一个元素,key为该单词,value为1(

    通过学习学会了文本的访问,了解一点哈希表用途.经过网上查找做成了下面查询文章重复词的JAVA程序. 1 思 思路: (1)将文章(一个字符串存储)按空格进行拆分(split)后,存储到一个字符串(单词 ...

  6. C#实现如何判断一个数组中是否有重复的元素 返回一个数组升序排列后的位置信息--C#程序举例 求生欲很强的数据库 别跟我谈EF抵抗并发,敢问你到底会不会用EntityFramework

    C#实现如何判断一个数组中是否有重复的元素   如何判断一个数组中是否有重复的元素 实现判断数组中是否包含有重复的元素方法 这里用C#代码给出实例 方法一:可以新建一个hashtable利用hasht ...

  7. css : 使用浮动实现左右各放一个元素时很容易犯的错误

    比如说,有一个div,我想在左侧和右侧各方一个元素. 如果不想用flex,那就只能用浮动了. ... <div class="up clearfix"> <h6& ...

  8. 解决 css 浮动后 父元素高度失效问题

    应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...

  9. 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

随机推荐

  1. javascript在html直接传值

    function getUrlParam(url, name) { var pattern = new RegExp("[?&]" + name + "\=([^ ...

  2. 依赖注入Unity框架

    依赖注入和控制反转是对同一件事情的不同描述,从某个方面讲,就是它们描述的角度不同.依赖注入是从应用程序的角度在描述,可以把依赖注入描述完整点:应用程序依赖容器创建并注入它所需要的外部资源:而控制反转是 ...

  3. Controller总结

    下图显示了组建之间的基本控制流程 1.1控制器工厂.动作调用器 控制器工厂负责创建对请求进行服务的控制器实例 动作调用其负责查找并调用控制器类中的动作方法. 1.2自定义控制器工厂 namespace ...

  4. vue入门--初始化

    VUE初始化时,可以用vue init webpack-simple或者vue init webpack.前者是简易版的工程,后者是标准的初始化.工程创建成功后,打开发现两个的目录结构有很大不同.si ...

  5. jQuery对象与DOM对象的区别

    如何判断一个js对象是否一个DOM对象 我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否D ...

  6. POJ 1328 Radar Installation 【贪心 区间选点】

    解题思路:给出n个岛屿,n个岛屿的坐标分别为(a1,b1),(a2,b2)-----(an,bn),雷达的覆盖半径为r 求所有的岛屿都被覆盖所需要的最少的雷达数目. 首先将岛屿坐标进行处理,因为雷达的 ...

  7. Front End Developer Questions

    Front End Developer Questions 感谢大神分享- 目录 前言 HTML部分 CSS部分 JavaScript部分 其他问题 前端学习网站推荐 前言 前言 HTML Docty ...

  8. Maven编译、打war包

    Eclipse环境,每次alt+F5刷新Maven项目时,总是会把项目的Java依赖刷新成1.5. 解决办法:在pom中加入如下片段 <plugin> <groupId>org ...

  9. 深入分析C++虚函数表

    C++中的虚函数(Virtual Function)是用来实现动态多态性的,指的是当基类指针指向其派生类实例时,可以用基类指针调用派生类中的成员函数.如果基类指针指向不同的派生类,则它调用同一个函数就 ...

  10. js浏览器下载总结(ios、and、微信、qq)

    前段时间做了个项目,里面关于手机移动端下载的问题 开始是判断微信.ios和android系统的下载 因为微信屏蔽点击事件和链接的缘故,需要通过打开新页面来进行下载 ios和android的下载分别为不 ...