bug总结-ie7下两列布局，右侧不能设置width100%

最新推荐文章于 2020-09-21 11:08:14 发布

woshifan1989

最新推荐文章于 2020-09-21 11:08:14 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： bug总结

本文链接：https://blog.youkuaiyun.com/fanhaiwang520/article/details/8961496

bug总结专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在IE7浏览器中，当右侧div设置为width: 100%时，导致页面布局异常的问题，并提供了解决方案。通过移除宽度百分比设定，可以修复页面在IE7中的显示错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div style="background:#222;width:100px;height:100px;float:left;"></div>
<div style="background:#999;width:100%;height:100px;margin-left:110px;">

以上代码发现在ie7下边右侧div会跑到下边去，原因就是右侧div设置了width：100%，将width：100%去掉即可；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

woshifan1989

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端基础总结--CSS

chenyouleww的博客

07-08

690

前端 1.1前端方向所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。一般的我们说前端都是小前端，就是web端。大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术前端能做什么？前端能做你上网

移动端 h5开发相关内容总结——CSS篇

热门推荐

强子的专栏

01-06

3万+

1.移动端开发视窗口的添加h5端开发下面这段话是必须配置的<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">其它相关配置内容如下： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) in

参与评论您还未登录，请先登录后发表或查看评论

IE7(ie7)解析width:100%;

congze2042的博客

01-23

212

So Fun! 正当web开发者对Microsoft的IE7在对Css2.1支持方面的努力做出了些肯定。但是，它却打破了width属性。为什么会这样问呢？如果你对css有些了解的话您可以做出以下尝试:使用一个HTML元素，也可以...

IE6下遮罩层不支持width:100%解决技巧

心随梦飞

06-06

718

今天在写前端遮罩层时碰到一个问题，使用绝对定位给图片添加透明遮罩层时，遮罩层用width:100%，在IE6下不兼容，IE7+没问题，因为IE6下的这个100%不是针对父级容器，而是针对一个指定高度的祖先容器（高度不为auto的容器）。解决办法是：给遮罩层父容器，即 position:relative; 的类名添加 overflow:hidden; 属性。给遮罩层添加高度大

标准模式中的 IE 6&7 width 100% bug

caibinghong的专栏

07-16

158

来自：http://www.99css.com/?p=43 在 web app 项目中经常遇到这个 bug，国外称之为100% ≠ 100% bug，又分为两种： div 的宽度 100% ≠ 100% (IE 6&7)需求：标准模式 #container 局部滚动 #asie 固定宽度 #content 自适应宽度再复杂一点还会要求两列等高，可参考 http://w...

ie7 父元素宽度自适应且为浮动的话子元素的宽度将不能按比例设置问题

weixin_30600503的博客

11-05

153

好久没切图，昨天遇到个浏览器兼容的老问题，在ie7下，父元素设置浮动后，其宽度是自适应的，子元素的宽度若没有确定则将显示最小宽度，即文本所占的宽度。正常其他浏览器显示如下： ie7中显示效果如下：解决方法： 1、给父元素添加固定的宽度；如果方法一违背了想要的效果，那么只能采用js来处理，即获取h4的同级节点ul的宽度，然后将其赋给h4. 如下： &lt...

IE6、7下，宽度100%时，滚动条隐显的不可控问题

weixin_30954607的博客

06-11

157

IE6、7是IE中我们所认识的元老级版本了，对于其兼容问题我一向是置之不理（确切的说是没有那个能力吧），因为没有哪个看此文的朋友用着这个浏览器，但是却偏偏有那么一些群体坚定不移的使用者…… 鉴于项目开发需要，因此不得已而为之，最近遇到了滚动条问题，所以有此文，本文也是我深入学习的一个过程吧。问题描述：IE6、7下，当外div宽度width:100%，内部div固定宽度大于外div显...

IE 6 Quirks Mode 模式下两组同级html标签的元素定位

最新发布

06-19

5.除了表格布局，还有哪些方法可以在IE6下实现稳定的两列布局？</think>### IE 6 Quirks Mode 同级 HTML 元素定位问题及解决方案在 IE 6 Quirks Mode（怪异模式）下，同级元素定位存在以下核心问题及解决方案： #...

CSS两列及三列自适应布局方法整理

司想君

03-10

805

布局自适应两列三列在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录：两列布局：左侧定宽，右侧自适应方法一：利用float和负外边距方法二：利用外边距方法三：利用position方法四：利用flex布局三列布局：左右定宽，中间自适应。方法一：使用负外边距方法二：使用绝对定位方法三：使用flex布局两列布局：左侧定宽，右侧自适应方法一：利用float和负外边距ht

05DIV-CSS学习

04-29

但需要注意的是，这种方法并不符合W3C标准，因此在两列布局中，最佳做法是将所有列都设置为浮动且固定宽度，以避免此bug。接下来，我们讨论三列固定宽度的居中对齐。要在保持固定宽度的同时使整个布局居中，只需要...

神奇的IE6、IE7，莫名其妙的bug——单元格的高度会影响文本框的宽度？

编程手札

08-14

2784

很多时候古老浏览器带来的问题往往出乎我们意料，而多数时候我们都能找到一个原因来解释这个bug，但今天在IE6和IE7遇到的bug确实让摸不着头脑，见下图：从图片可以看到有两个问题： 1、表格右边框线不见了； 2、红色圆圈圈住的地方，那个文本框少了个右边框线，而另外的一个Textare和input则显示完好。问题重现的HTML源代码如下： XX系统 *{paddi

常用能兼容IE7的页面布局汇总

a633125的博客

11-16

248

一.兼容到IE7，头部脚部固定，内容区自适应撑开 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> html, body { margin: 0; paddin...

ie7 height 100%无效解决办法

Web前端开发

12-29

1614

position:absolute http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html

min-width、max-width兼容IE6、IE7的解决方法

xjun0812的博客

12-25

9542

很多时候，我们会想要设置容器的最小宽度或最大宽度，但IE6不支持min-width、max-width属性怎么办？IE7以上虽然支持min-width、max-width，但是容器要设置display才行，如果不需要浮动，IE7又不支持display:inline-block，那又怎么办？

elementui的table在IE浏览器下宽度不能100%显示

qq_37875903的博客

09-21

1291

在style全局样式中加上两行代码： .el-table__header{ width: 100% !important; } .el-table__body{ width: 100% !important; }

常见的IE布局兼容问题

dxiaofg的博客

05-05

1670

本文的转载地址为：http://www.tuicool.com/articles/6bAjim，供学习使用。主要讲了这些问题，在碰到这些问题的时候可以查阅； (1)div 中内容在IE和火狐中居中问题；（2）高度的问题，div出现重叠（3）浮动引发的问题如外围DIV无法框住内部元素；（4）IE浮动margin产生双倍距离-display：inline；（5）padding 问

width：100%与width：auto的区别

Great_Eagle的博客

07-20

2559

width：100% width：100%代表自身Width=父contentWidth*100% 其中当自身box-sizing:content-box（也是默认值）时，自身Width的含义为自身contentWidth，当box-sizing:border-box（IE盒模型，IE8及以下只支持IE盒模型）时，自身Width的含义为自身contentWidth+paddingWidth+b...

IE7下下边距BUG

haoxinnihao的专栏

12-23

790

当只通过设置UL宽度使LI多行显示时，即使设置了LI{margin:0; padding:0;} LI也会有下边距，此时给LI加上{float:left}就可以了。

联想7100 L-IG41主板升级BIOS以支持WIN7 64位安装

- **不能安装win7** 明确了文章要解决的问题，即主板BIOS与Windows 7 64位操作系统之间的兼容性问题。通过压缩包子文件的文件名称列表中的文件名“M7150.ROM”，我们可以推断出这是BIOS升级文件的实际名称。通常...