首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

IE9浮动溢出:隐藏和表宽度100%未正确显示

IE9浮动溢出是一个常见的CSS问题,它通常出现在现代浏览器中,比如Chrome、Firefox、Safari等。当浏览器的布局元素(例如div、table、tr、td等)的宽度超过其父元素的宽度时,就会发生浮动溢出。

这种问题通常是由于CSS中的float属性引起的。当使用float属性时,元素会脱离文档流,并且会浮动到当前行的左侧。如果元素所在的行的宽度小于该元素的长度,就会发生浮动溢出。

解决这个问题的方法有多种,其中一种是使用overflow属性。overflow属性可以控制元素是否自动添加滚动条。当元素的宽度超过父元素宽度时,可以使用overflow:hidden属性来隐藏溢出的元素。另外,还可以使用overflow:auto属性来添加滚动条,并在需要时自动显示。

除了使用overflow属性外,还可以使用flex布局或grid布局来解决这个问题。flex布局可以更灵活地控制元素的排列方式,而grid布局则可以提供更加精确的布局控制。

在IE9中,如果元素的宽度设置为100%,并且父元素的宽度小于该元素的长度,也会发生浮动溢出。这是因为IE9的FloatLayout引擎在计算元素的位置时,会将元素的宽度计算在内,因此如果元素的宽度为100%,并且父元素的宽度小于元素的长度,就会导致元素的位置不正确,从而发生浮动溢出。

要解决这个问题,可以使用CSS中的white-space: nowrap属性来防止元素的内容在行内换行,并使用overflow: hidden属性来隐藏溢出的元素。

另外,还可以使用display: inline-block属性来将元素设置为内联块级元素,这样可以避免元素浮动而导致溢出。

总的来说,IE9浮动溢出的问题可以通过CSS中的overflow属性、flex布局、grid布局以及white-space属性等来解决,不同的方法有着不同的优缺点,需要根据实际情况选择使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端样式问题汇总

:12px; 高度:12px; 边框底部:1px实心#999; 右边框:1px实线#999; 变换:rotate(-45deg); } 4,超过1行/ 2行显示省略号 .line-1 { 宽度100px...; 空白:nowrap; 溢出隐藏; 文字溢出:省略号; } .line-2 { 宽度100px; 溢出隐藏; 文字溢出:省略号; 显示:-webkit-box; -webkit-line-clamp...2; //控制多行的行数 -webkit-box-orient:垂直; } 5,水平/垂直居中定位 //绝对定位未知高度,距顶部,左边50%,然后转换:translate(-50%,-50%),不支持IE9...中央 { 保证金:自动; 位置:绝对; 最高:0; 底部:0 左:0; 正确:0; } //绝对定位已知高度 。...Opera12以下版本的CSS选择器均不支持占位文本 8,去掉图片底部至少边距 img { 边界:0; 垂直对齐:底部; } 9,去掉按钮点击高亮样式 按钮{ -webkit-tap-highlight-color

85520

翻译:如何使用CSS实现多行文本的省略号显示

CSS实现多行文本溢出的省略号显示 我们把实现的细节划分为7个步骤,在这个实现过程中最简单的就是截断文本,而最难的部分则是让一个元素处在其父包含块溢出时的右下方,并且当父元素溢出时该元素消失不可见。...这段代码实现很简单,就是三个子元素包含块的高度及浮动设置: 1.propfloat:left <div...; background: #FFA; } 2nd 模拟场景 我们通过创建一个子元素来替代将要显示的省略号,当文本溢出的情形下该元素显示正确的位置上。...4th 削窄prop元素 目前,最左侧的prop元素的作用在于让realend元素在文本溢出时处在其正下方,在前几节的示例代码中为了直观的演示,设置prop元素的宽度100px,那么现在为了更好的模拟实际的效果...6th 隐藏 之前的实现中在文本溢出的情况下,realend元素会出现在父元素的右侧,正如 ? 。

2.8K60

前段:可能是最全的 “文本溢出截断省略” 方案合集

先来点基础的,单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行)...;( 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 ) overflow: hidden;(文本溢出限定的宽度隐藏内容) text-overflow: ellipsis;(多行文本的情况下...(按高度) ○ 多行文本溢出显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定的宽度隐藏内容) line-height: 20px;(结合元素高度,高度固定的情况下,设定行高...) overflow: hidden;(文本溢出限定的宽度隐藏内容) float: right/left;(利用元素浮动的特性实现) position: relative;(根据自身位置移动省略号位置...接下来对 C 盒子进行相对定位,将 C 盒子位置向右侧移动 100%,并向左上方向拉回一个 C 盒子的宽高(不然会看不到哟)。这样在文本溢出时不会看到 C 盒子,在文本溢出时,显示 C 盒子。

2.3K40

前段:可能是最全的 “文本溢出截断省略” 方案合集

先来点基础的,单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行)...;( 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 ) overflow: hidden;(文本溢出限定的宽度隐藏内容) text-overflow: ellipsis;(多行文本的情况下...(按高度) ○ 多行文本溢出显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定的宽度隐藏内容) line-height: 20px;(结合元素高度,高度固定的情况下,设定行高...) overflow: hidden;(文本溢出限定的宽度隐藏内容) float: right/left;(利用元素浮动的特性实现) position: relative;(根据自身位置移动省略号位置...接下来对 C 盒子进行相对定位,将 C 盒子位置向右侧移动 100%,并向左上方向拉回一个 C 盒子的宽高(不然会看不到哟)。这样在文本溢出时不会看到 C 盒子,在文本溢出时,显示 C 盒子。

2.1K00

可能是最全的 “文本溢出截断省略” 方案合集

先来点基础的,单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行...;( 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 ) overflow: hidden;(文本溢出限定的宽度隐藏内容) text-overflow: ellipsis;(多行文本的情况下...再进阶一步,多行文本溢出省略(按高度) ○ 多行文本溢出显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定的宽度隐藏内容) line-height: 20px;(结合元素高度...;(文本溢出限定的宽度隐藏内容) float: right/left;(利用元素浮动的特性实现) position: relative;(根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break...接下来对 C 盒子进行相对定位,将 C 盒子位置向右侧移动 100%,并向左上方向拉回一个 C 盒子的宽高(不然会看不到哟)。这样在文本溢出时不会看到 C 盒子,在文本溢出时,显示 C 盒子。 ?

3.2K11

overflow:hidden属性

overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。...,我们常规的理解是,我们允许nei这个id的div的右边出现其他的内容,只要它的宽度不超过wai这个divnei这个div的剩余值。...我们发现,当nei这个div的宽度高度都大于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中,都是500。...我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏掉了。...而当nei的高度超过wai的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义! 我相信,通过我的这些文字,大家对overflow:hidden这个属性有了全新的认识。

1.6K10

可能是最全的 “文本溢出截断省略” 方案合集

先来点基础的,单行文本溢出省略 核心 CSS 语句 overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容) white-space: nowrap;(设置文字在一行显示,不能换行...;( 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 ) overflow: hidden;(文本溢出限定的宽度隐藏内容) text-overflow: ellipsis;(多行文本的情况下...再进阶一步,多行文本溢出省略(按高度) ○ 多行文本溢出显示省略号 核心 CSS 语句 overflow: hidden;(文本溢出限定的宽度隐藏内容) line-height: 20px;(结合元素高度...;(文本溢出限定的宽度隐藏内容) float: right/left;(利用元素浮动的特性实现) position: relative;(根据自身位置移动省略号位置, 实现文本溢出显示省略号效果) word-break...接下来对 C 盒子进行相对定位,将 C 盒子位置向右侧移动 100%,并向左上方向拉回一个 C 盒子的宽高(不然会看不到哟)。这样在文本溢出时不会看到 C 盒子,在文本溢出时,显示 C 盒子。 ?

3.4K20

「学习笔记」CSS基础

优点: 代码简洁 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。...父级overflow:hidden; 书写简单 溢出隐藏 父级after伪元素 结构语义化正确 由于IE6-7不支持:after,兼容性问题 父级双伪元素 结构语义化正确 由于IE6-7不支持:after...1.1 display 显示(重点) display设置或检索对象是否显示或如何显示。 display: none 隐藏对象 特点:隐藏之后,不再保留位置。...1.4 显示隐藏总结 属性 区别 用途 display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛 visibility 隐藏对象,保留位置...溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式。

3.2K30

CSS第五天-定位

,可以直接设置宽度高度,默认宽度是内容宽度 ---- 固定定位:fixed 永远根据浏览器可视区域定位,不会随着滚动条的滚动而滚动 可以直接加宽高,默认宽度是内容宽度 脱离标准流,在页面不占有位置 解决分辨率问题有两种方法...(重点): 开发中经常会通过 display属性完成元素的显示隐藏切换 display:none;(隐藏)、 display:block;(显示) visibility:hidden 隐藏元素本身,隐藏后的元素还占有位置...margin: 0 auto 浮动元素 === 给外面标准流的父元素设置 宽度margin:0 auto 定位元素 === left: 50% translateX(-50%) 溢出隐藏:overflow...默认值 overflow: visible 溢出部分溢出 overflow: hidden 无论是否溢出,都显示滚动条overflow: scroll 根据是否溢出,自动显示隐藏滚动条 overflow...: auto white-space: nowrap;(设置文字在一行显示,不能换行) text-overflow: ellipsis;(规定当文本溢出时,显示省略号来代表被修剪的文本) ---- 边框圆角

2.7K40

实用的CSS3属性使用技巧

下面列出了一些非常实用的CSS3属性使用技巧,希望能够为你的开发、设计工作带来一些帮助。 1. 圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用。...@media属性 Media属性用于设置同一样式在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。...@media screen and (max-width: 480px){ /* 网页在宽度为480px屏幕上的显示样式 */ } 开发者也可以使用@media print属性指定打印预览的样式...clearfix属性 如果设计师认为Overflow: hidden不能很好的处理浮动,那么clearfix提供了更好的处理浮动的解决方案。...Overflow: hidden Overflow:Hidden这个CSS属性除了隐藏溢出功能外,还有清除浮动的作用。

40710

CSS入门?一篇就够了!

(3)宽度默认是容器的100% (4)可以容纳内联元素其他块元素。...块级元素行内元素区别 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素其他块元素。...优点: 代码简洁 缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。...元素的显示隐藏 在CSS中有三个显示隐藏的单词比较常见,我们要区分开,他们分别是 display visibility overflow。...(…),而是简单的裁切 ellipsis :  当对象内文本溢出显示省略标记(…) 注意一定要首先强制一行内显示,再次overflow属性 搭配使用

5.2K20

overflow:hidden作用能治住塌陷_html溢出隐藏代码

一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度高度属性,那么超出的部分将会被隐藏,不占位。...style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflow: hidden; /*溢出隐藏... 效果如下: 一般情况下,在页面中,一般溢出后会显示省略号,比如,当一行文本超出固定宽度隐藏超出的内容显示省略号。.../*只适用于单行文本*/ div{ width: 150px; background: skyblue; overflow: hidden; /*溢出隐藏*/...white-space: nowrap; /*规定文本不进行换行*/ text-overflow: ellipsis; /*当对象内文本溢出显示省略标记(...)*/ } 效果如下: 二.

1.8K30

关于回顾css发现的一些问题

2、当元素浮动时,其他元素会忽视浮动元素的存在,与浮动元素在一行显示,会浮动元素空间重叠,但是互相不会挤掉各自的文本元素 <!...“访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义(即经过时如果hover在link前面,hover会优先生效,link后生效并且会覆盖hover的效果,最后显示的是...解析:1、设置width设置的是盒子当中content的宽度,%表示时是指占父元素width的多少(即父元素content)不包括boder,paddingmargin宽度,由于页面渲染是从左往右的,...所以当子元素溢出或者未占满父元素时设置margin(离包含它盒子的边框距离,溢出充满时,margin-right找不到无法找参照物),所以margin-left有效,margin-right无效,但是...margin,所以会溢出(毕竟width本来说100%,子元素再大可不就溢出了嘛),溢出了margin-right找不到参照物所以失效

40510

知识整理之CSS篇

隐藏元素的几种方法 visibility: hidden; 该属性隐藏元素,单元素在文档流中仍占据空间。 display: none; 元素不可见,并且在文档流中不占据空间。...示意图: image.png 解释下什么是浮动和它的工作原理? 什么是浮动? 非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开。 此时,内容会溢出到容器外面而影响布局。...这种现象被称为浮动溢出)。 工作原理 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象) 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 如何清除浮动 1....原理:当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题...关于这一点,normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器操作系统中的与表单相关的bug。

1.6K20

前端知识点总结(html+css)(上)

常见块级元素、行内元素、行内块元素的特点区别 块级元素 (常见的块级元素div,p,h,form,li) 一行显示一个; 宽度默认为容器的100%; 可以设置高度宽度内外边距 块级元素可以包含其他的块级元素和文本...(如div下可包含div) 行内元素(常见的行内元素a,span.img) 一行显示多个 宽度为内容的宽度 不可以设置高度宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素行内元素的特征.../隐藏元素,占位置,可添加事件 9. css中的overflow属性 scroll //必会出现滚动条 auto //子元素内容大于父元素,显示滚动条,超出显示,不超出不显示 visible /.../溢出内容出现在父元素之外 hidden //溢出隐藏 10....溢出文字的省略显示 单行文本 white-space: nowrap //(强制一行显示) overflow: hidden //(溢出隐藏) text-overflow: ellipsis //(显示省略标记

27510

前端学习(13)~css学习(七):浮动

如果不设置宽度,那么宽度将默认变为父亲的100%。 行内元素块级元素的分类: 在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。...行内元素块级元素的相互转换 我们可以通过display属性将块级元素行内元素进行相互转换。display即“显示模式”。...清除浮动方法4:overflow:hidden; 我们可以使用如下属性: overflow:hidden; overflow即“溢出”, hidden即“隐藏”。这个属性的意思是“溢出隐藏”。...顾名思义:所有溢出边框的内容,都要隐藏掉。如下: ? 上图显示,overflow:hidden;的本意是清除溢出到盒子外面的文字。但是,前端开发工程师发现了,它能做偏方。...我们设置一个height为 5px 、宽度为 200px的盒子,看下在IE 8 IE 6中的显示效果: ?

89010

前端常考面试题整理_2023-03-15

不存在或者格式不正确——混杂模式);HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的 法,实现时,已经尽可能大的实现了向后兼容(HTML5 没有严格混杂之分)...如果没有找到,就继续从其原型上找,Object.getPrototypeOf方法用来获取指定对象的原型 proto = Object.getPrototypeOf(proto); }}单行、多行文本溢出隐藏单行文本溢出...overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 溢出用省略号显示white-space: nowrap;...// 规定段落中的文本不进行换行多行文本溢出overflow: hidden; // 溢出隐藏text-overflow: ellipsis; // 溢出用省略号显示display...两栏布局的实现一般两栏布局指的是左边一栏宽度固定,右边一栏宽度自适应,两栏布局的具体实现:利用浮动,将左边元素宽度设置为200px,并且设置向左浮动

49620
领券