CSS-float兼容问题

最新推荐文章于 2022-10-05 21:35:57 发布
最新推荐文章于 2022-10-05 21:35:57 发布
阅读量668 收藏
点赞数
分类专栏： CSS 文章标签： float css 兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36768524/article/details/56675117
版权

float就是inline-block的加强版

  1. 块元素同行显示
  2. 换行不解析
  3. 不设置内容宽高撑开
  4. 宽高padding支持
  5. 碰到父级或者有float的元素停止

可以设置属性为left ,right,none

这里主要介绍float的一些兼容问题

一、要让元素同行显示，给所有的同行元素加float，不然在ie67下面会有3px的间距

二、ie6下面，块元素有浮动且有左右margin的时候，会出现双倍的左右margin
解决办法是 display:inline

三、ie67下面，li元素本身没有浮动，但是内容有浮动，相邻的li会有3px的间隙
解决方法

1—-给li加浮动，同时设置width，再给ul请浮动（不推荐）

2—-给li加vertical-align

这里补充vertical-align还可以用于解决图片间隙问题

JayScofield
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 936
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
css hack--浏览器兼容性问题
Ryan的博客
06-12 1522
css hack–浏览器兼容性问题 写css样式的时候，恐怕最头疼的就是各个浏览器下的兼容性问题，即css hack，不同的浏览器对css的解析结果是不同的，因此会导致相同的css输出的页面效果不同，这就需要css hack来解决浏览器局部的兼容性问题。使用css、 hack将会使用你的css代码部分失去作用，然后借助条件样式，使用其原css代码在一些浏览器解析，而css hack代码在符合条件要...
css float文字的显示问题（兼容性）
08-02
NULL 博文链接：https://maoting.iteye.com/blog/1979596
关于float的兼容问题。
qq_23095607的博客
08-22 784
1.在兼容模式下会出现这种情况 他的HTML代码是: css样式为： 2.解决这种问题的办法只需要将位置更换一下,即
CSS浮动Float——基础知识及兼容性问题
香蕉程序猿
09-27 3117
先说一下浮动的基本定义：浮动的框可以向左或向右移动，直到它的外边缘碰到父级边界或另一个浮动框的边框为止。由于浮动框不在文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。那么就要说一下文档流了，文档流是文档中可显示对象在排列时所占用的位置（可以认为各个元素原本默认的位置）。那我们在实际应用哪里会遇到这种问题呢。例如我们现在需要把几个块级元素放在一排，我们可以使用display：inlin
float属性浏览器兼容问题
08-24 499
ie下，float:right自动换行了，ff下正常，这种情况，float:right的元素应该写在同行元素的左边，就可以了
js兼容性之css的float
on1y_rL的博客
03-16 257
此代码转载至妙味课堂的教学，仅用于个人学习记录。 无标题文档 var oInp = document.getElementById('inp1'); oInp.onclick = function (){ oInp.type = 'checkbox'; // 咱们有仨位“祖宗” /* IE6 IE7 IE8 *
前端项目-float-label-css.zip
09-03
通过这个项目，开发者可以学习到如何使用纯CSS实现复杂的界面效果，同时理解如何优雅地处理浏览器兼容性问题。此外，它还强调了在设计移动优先的界面时，考虑空间效率和交互体验的重要性。对于前端开发者来说，理解...
css1--关于float的div撑不起父div的问题
08-10
标题中的“css1--关于float的div撑不起父div的问题”指的是在CSS布局中常见的一个技术挑战。在网页设计中，我们经常使用`float`属性来实现元素的浮动，以便进行布局，比如创建多列布局或者使文本环绕图片。然而，...
css清除浮动float的七种常用方法总结和兼容性处理
热门推荐
PromiseCao的博客
10-09 4万+
7、万能清除法 **after伪类** 清浮动（现在**主流**方法，**推荐使用**） ``` 选择符:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;
详解css清除浮动float的七种常用方法总结和兼容性处理
11-21
在清除浮动前我们要了解两个重要的定义： 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear, clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素 clear:both：在左右两侧均不允许浮动元素。 具体清楚浮动的方法主要一下几种： 1、clear清除浮动（添加空div法） 在浮动元素
CSS div float IE和FireFox的兼容性问题
黑色空间
05-22 3918
在IE中，只有指定该DIV的CLASS为FLOAT:left 才会有FLOAT属性而在FF中，第一个指定后 其后的div也随着平移，所以可以在同级的float加上.clear{ clear:both;}  ,  CSS中 height: 19px !important; height: 21px;  在IE是不认important的，如果属性重复，默认截取最后一个。而在FF中impor
ie浏览器float兼容性
weixin_30387339的博客
01-16 570
在最近的项目中，遇到label、input、和button显示同一行，需求如下 实现代码，框架为react.js <label class="formGrid__label required_title" style={{ marginLeft: "-120px", width: "90px", paddingLeft: "10px" }} for="checkValue"&g...
Float---兼容性很好的布局方案
发果叁
05-27 188
接到的需求 今天老大给了我一个需求，让我完成一个静态页面的布局，我心里一想，这不是在侮辱我么，立马biu biu biu开干。写了大概一半，老大说这个页面必须得兼容IE8而且不可以使用静态资源，当时我的内心是崩溃的。直接裂开。 要做的页面大概是这个样子 那要怎么来实现呢于是乎我去了一个网站Can i use 布局的话有多种方法，比如flex、grid、float，我依次查看了他们的兼容性，如下： 布局方式 兼容性 float IE6-11均可 flex IE6-9不支持；10和11部
常见的css兼容问题
最新发布
m0_57391092的博客
10-05 2218
常见的css兼容问题
属性操作-浮动cssFloat（兼容IE6、7、8）
erdouzhang
07-06 1012
html： "button" id="inp"> div id="box">div> css： style> #box { width: 100px; height: 100px; background-color: pink; float: right; } style> javascript:
css的兼容性问题
赵佳敏的博客
11-03 2358
目录 一、为什么会出现css的兼容性问题 二、如何解决css的兼容性问题 1、双倍浮动BUG 2、表单元素行高不一致 3、IE6（默认16px为最小）不识别较小高度的标签（一般为10px） 4、图片添加超链接时，在IE浏览器中会有蓝色的边框 5、最小高度min-height不兼容IE6 6、图片默认有间隙 7、按钮默认大小不一 8、百分比BUG 9、鼠标指针BUG 10、透明度设置，IE不识别opacity属性 11、上下margin重叠问题 12、给子元素设置margin-t.
解决css中存在的几种兼容性问题
jingjing的博客
08-10 264
img标签底部间隙问题 div中包含一张图片，底部可能有2px,4px或更多的间隙，不同的font-size会影响这个间隙的大小。 <style type="text/css"> div{ border: 5px solid red; float: left; } </style> <div><img src="photo.png" alt=""></div> 解决方法： 将图片由行内元素转换为块级元素， d
解决Div+CSS浏览器兼容性问题的策略
"关于div+css在浏览器中的兼容性问题及解决...解决div+css的浏览器兼容问题需要深入理解CSS规范，以及各浏览器的解析差异。通过合理的设计、合适的代码结构和有效的兼容性策略，可以确保网页在不同浏览器中表现一致。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值