开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

显示的ie11布局问题:行内块百分比

基础概念

IE11 是 Internet Explorer 的最后一个版本，发布于 2013 年。由于其较老的特性和有限的现代浏览器支持，IE11 在处理一些现代网页布局时可能会出现问题。行内块（inline-block）是一种 CSS 布局模式，它结合了块级元素和行内元素的优点，允许元素在一行内显示，同时支持设置宽度和高度。

相关优势

节省空间：行内块元素可以与其他行内块元素并排显示，从而节省页面空间。
灵活性：行内块元素可以设置宽度和高度，这使得布局更加灵活。
兼容性：尽管 IE11 对行内块的支持有限，但它仍然支持这一特性，只是可能需要一些额外的 CSS 样式来修正布局问题。

类型

行内块元素主要通过 display: inline-block; 属性来实现。常见的行内块元素包括：

按钮（<button>）
图片（<img>）
输入框（<input>）

应用场景

行内块常用于以下场景：

水平导航栏
图片列表
表单元素

常见问题及解决方法

问题：IE11 中行内块元素的百分比宽度不正确

原因：IE11 对 CSS 的解析和渲染与现代浏览器存在差异，特别是在处理百分比宽度时。

解决方法：

使用 box-sizing: border-box;：
使用 box-sizing: border-box;：
使用 vertical-align: top;：
使用 vertical-align: top;：
使用 float 属性：
使用 float 属性：
使用 flexbox 布局（推荐）：
使用 flexbox 布局（推荐）：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE11 Inline-Block Example</title>
    <style>
        .container {
            display: flex;
        }
        .inline-block-element {
            flex: 1;
            border: 1px solid #000;
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inline-block-element">Element 1</div>
        <div class="inline-block-element">Element 2</div>
    </div>
</body>
</html>

参考链接

通过以上方法，可以有效解决 IE11 中行内块元素的布局问题。

相关搜索:如何调整行内块布局中元素之间的间距？jQuery将我的显示行内块更改为无 CSS显示IE的内联块问题 IE11浮动输入标签错误(占位符显示的问题？)显示的flex项宽度问题: IE11中的内联flex 在使用recyclerview的android中，表格布局中的表格行内容不能水平显示我在网站上的百分比/布局问题。内容来回移动如何在不显示的情况下使行内块元素高度对齐:table-cell 浏览器显示svelte-sapper组件中{#each}块的问题显示IP地址的Drupal 8自定义块模块的缓存问题将百分比转换为等级的问题-所有结果显示为A 代码强制编译器显示与代码：：块不同的输出(问题282A - Bit++)堆积面积图有问题，是否一直显示堆积面积图的百分比？我在我的项目组合中的平板电脑和移动视图中的布局有问题，元素无法正确显示下面的布局有什么问题？在android的5.1版本中，它并没有以相对布局为中心。在设计窗口中显示良好

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )

文章目录一、默认的标准流布局二、浮动特性 - 脱离标准流布局、取消占用位置三、浮动特性 - 显示模式类似于行内块元素四、父容器中分别设置左右浮动效果一、默认的标准流布局 ---- 默认的标准流...原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ; 网页中的 Display 显示模式有 3 种 ; 块级元素行内元素行内块元素元素的浮动特性会改变该元素的 Display...显示模式 , 原来的元素不管是块级元素还是行内元素 , 设置浮动样式后 , 其显示模式类似于行内块元素 ; 代码示例 : <!...: 三、浮动特性 - 显示模式类似于行内块元素 ---- 网页中的 Display 显示模式有 3 种 ; 块级元素行内元素行内块元素浮动特性 ( 显示模式类似于行内块元素 ) : 元素的...浮动特性会改变该元素的 Display 显示模式 , 原来的元素不管是块级元素还是行内元素 , 设置浮动样式后 , 其显示模式类似于行内块元素 ; 如果同时将两个 div 元素设置为

5993 0

前端学习笔记—CSS

学习路线块元素，行内块元素，行内元素定义盒子模型文本操作文本垂直操作：vertical-align的使用图示。middle设置居中。...对于行内元素来说，左右的padding是可以完美设置的，上下的padding设置后是会被遮挡。反之块元素和行内块元素则正常。...样式继承布局技巧元素空白问题，x基线对齐导致处理浮动float 创建的初衷是为了实现文字环绕效果，也就导致浮动模块盖住的区域内的文字会被挤出来到浮动模块外展示给用户观看。...元素变换transform 移动盒子模型位置的方法 : transform: translate 中可以传入百分比值 , 百分比是相对于元素自身尺寸来说的 ; 通过定位样式移动盒子 : 相对定位 relative...定位元素与弹性盒子都会变成“行内块”化，弹性盒子作用于子元素，定位元素作用于自身。浮动与弹性盒子选择上的区别：浮动(float)：可以让元素同行显示，元素排列不下时会自动让元素换行显示。

1231 0

界面设计技法之布局

.box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！....box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！ .box2 我是一个行内块！这次我可没有用 clear 。太棒了！...元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。...清除浮动这谭水很深很深，但是这个简单的解决方案已经可以在今天所有的主要浏览器上工作。 百分比宽度布局 百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。...附上之前做的一个用百分比做布局的项目。

1.2K1 0

CSS进阶03-定位体系，格式化上下文，常规流

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。） 1....CSS2.2中，标准流包括块级盒的块格式化和行内级盒的行内格式化，以及块级盒和行内级盒的相对定位。浮动 Floats 。...属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。...属性值如果是百分比，则是根据其包含块的width来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。...属性值如果是百分比，则是根据其包含块的height来计算的，如果属性值既不是value，也不是百分比，那么就默认是auto。

1.7K1 0

从头学前端-CSS基础03

，给父元素添加属性text-align: center --- > 嵌套关系的块级元素垂直外边距的塌陷问题；在父元素和子元素同时具有margin-top属性时，以最大值为准；解决方式有：给父元素 >...，定位普通流(标准流)：就是标签按照默认方式排列；块级元素独占一行，从上向下顺序排列，行内元素从左向右排列；碰到父元素边缘则自动换行undefined网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动什么是浮动...：float属性用于创建浮动层，将其移动到一边，直到左边缘或右边缘触及到包含块或另一个浮动框的边缘；浮动特性浮动元素会脱离标准流- 浮动的盒子不再保留原来的位置- 脱离了标准流的控制浮动元素会一行内显示...- 如果多个盒子都添加了浮动，那么所有浮动的盒子将会在一行内显示，并且顶端对齐；- 浮动的元素是互相紧贴到一起，如果父级元素的宽度装不下元素，浮动元素会另起一行靠左排列浮动元素会具有行内块元素的特点-...任何元素都可以浮动，给元素添加了浮动，元素就具有了行内块元素的特性；- 如果行内元素给了浮动，那么行内元素就可以设置高度和宽度- 如果块级元素添加了浮动，且没有设置宽度，那它的大小根据内容而定；-

6752 0

每天10个前端小知识【Day 14】

行内元素和块级元素有什么区别？定义行内元素：没有宽高不能换行，不可以改变宽高。块级元素：有宽高能换行，可以改变宽高。区别 1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。...这里设置的text-align是设置在外层的div当中，评论区有提到，因为上面讲了行内元素设置宽高是无效的，所以我们需要的居中其实是将块级元素当中的行内元素居中。...常见的行内元素和块级元素 3. display 有哪些取值？ display 属性可以设置元素的内部和外部显示类型。...元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型可以控制其子元素的布局（例如：flow layout，grid 或 flex）。...；性能上使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建

1221 0

CSS布局(二) 盒子模型属性

padding显得中规中矩了很多，没有什么兼容性，也没有一些特殊的问题　　对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，垂直内边距不影响行高，但会影响自身尺寸，加背景颜色可以看出...的百分比值都是相对于包含块的宽度决定的，常常用于移动端头图外边距margin 设置外边距margin会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景...所以，普通元素的margin百分比相对于块级父级元素的width，定位元素的margin百分比相对于定位父级的width margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性...左右margin设置为auto，会被重置为0 所以，图片要水平居中，需要设置为display:block元素 3.无效情形 1、行内元素垂直margin无效因为行内元素垂直布局主要是通过行高...而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。

1.9K7 0

css行高line-height的用法（转）

本文导读： “行高“指一行文子的高度，具体来说是指两行文子间基线间的距离。在CSS，line-height被用来控制行与行之间的垂直距离。line- height 属性会影响行框的布局。...在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。所有浏览器都支持 line-height 属性。...该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。...行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高...-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。

9851 0

CSS3 圆角边框阴影浮动详解

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。浮动最典型的应用：可以让多个块级元素一行内排列显示。...就像漂浮在标准流上面一样设置了浮动（float）的元素最重要特性：脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）浮动的盒子不再保留原先的位置浮动的元素会一行内显示并且元素顶部对齐...如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列注意：浮动的元素是互相贴靠在一起的（不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。...浮动的元素会具有行内块元素的特性. 任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。...也就是说如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度。

1.6K2 0

移动web开发之流式布局

流式布局（百分比布局）流式布局就是百分比布局，也称非固定像素布局。通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。...流式布局方式是移动web开发使用的比较常见的布局方式 max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-hight 最小高度）京东首页案例... */ overflow: hidden; height: 44px; /* 固定定位的盒子需给定宽度，且给百分比需在一定范围内*/ width: 100%; max-width...main-content .brand div img { width: 100%; } /* 导航模块 */ .main-content .nav a { /* 添加浮动就不需要转换行内块...，另起一行显示 */ display: block; }

5095 0

CSS入门指南-4：页面布局

对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block div 是一个标准的块级元素。...标签虽然分别位于两行，但这并不影响图片在浏览器中显示时的效果。图片是行内元素，所以它们显示的时候就会并列出现在一行上。而且，标签之间的空白（包括制表、回车和空格）都会被浏览器忽略。...而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。...块级元素和行内元素是可以互相转化的： /*默认为块级元素*/ p {display: inline;} /*默认为行内元素*/ a {display: block;} 属性了 display 属性之后，...百分比宽度上面的例子中，我们用到了百分比宽度，百分比是一种相对于包含块的计量单位。你还能同时使用 min-width 和 max-width 来限制最大或最小宽度！

2.2K1 0

PQ里的百分比怎么设置？数字显示格式问题一次讲完！ | Power Query实用函数

- 1 - 百分比问题首先，说一个很多朋友问过的问题：在Power Query里怎么显示百分比？当然，有朋友会说，这个问题不是很简单吗？...在“转换”功能里，直接设置数据类型为“百分比”不就OK了吗？如下图所示：的确，这样简单设置一下，就可以显示为百分比形式了，但是，为啥是2位小数？如果要3位小数，怎么办？...，不是转换后的百分数保留3位小数，百分数始终显示为2位小数！那如果想按希望的百分数小数位数显示，那该怎么办呢？...其中参数P1的P，即表示转换为百分比形式，1表示百分数的小数位数为1，结果如下图所示：当然，显示结果要带3位小数，则参数改为P3，如下图所示： - 2 - 其他数据格式前面介绍了百分比的转换方式...具体表示方法是怎样的？下面对该参数可表示的形式（字母）及其含义，汇总如下：建议收藏！以备查阅！使用方法参考上面百分比P的使用，建议大家简单模拟几个数字，动手试一下。

2.4K3 0

CSS-03

# 看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？...内边距，在ie6等低版本浏览器也会有问题。我们尽量不要给行内元素指定上下的内外边距就好了。 # 外边距合并使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。...auto : 　超出自动显示滚动条，不超出不显示滚动条 hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉 scroll : 　不管超出内容否，总是显示滚动条应用:溢出的文字隐藏 .hid-kk...先强制一行内显示文本*/ white-space: nowrap; /*2. 超出的部分隐藏*/ overflow: hidden; /*3....# CSS优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。 !

2.1K3 0

前端入门4-CSS属性样式表声明正文-CSS属性样式表

所以，清楚了浏览器默认的文档流布局方式后，得再了解下所说的行内元素，块级元素是什么，怎么切换。...区分以及理解行内元素和块级元素对于写网页布局非常重要，因为浏览器是按照文档流从上到下，从左到右来进行绘制网页的。...=”display:inline-block> 也就是行内块元素嵌套了块级元素内部又嵌套了行内块元素，这样的话，布局方面会有些问题，原因不清楚。...但把中间的块级元素也设置成行内块元素就没问题了。另外，并不是说，不允许行内块元素内嵌块级元素，也是可以的。... 这是因为多个浮动元素之间并排显示的前提的有足够的空间让这些元素并排，所以通常对于浮动元素的宽度设置是通过百分比来设置，确保多个并排的元素即使窗口发生变化仍旧可以并排布局。

1.6K3 0

CSS3

外边距（margin）页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。...transform中translate使用百分比时相对的是自己的长宽，不是父盒子的。...➢ 常见标准流排版规则：块级元素：从上往下，垂直布局，独占一行行内元素或行内块元素：从左往右，水平布局，空间不够自动折行 ---- 浮动例如word里的图片环绕文字四周。...例如：h系列，p，div…… > 行内元素/行内块元素一行显示多个 ==> 水平布局。...例如：a，input，span…… 2.浮动可以让原本垂直布局的块级元素变成水平布局,子元素嵌入进父元素上方，父元素内容环绕浮动子元素，上方有介绍，类似于图层的概念或微软word中图片环绕文字四周概念

7749 0

前端面试之HTML && CSS

*{margin:0;padding:0;} IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。...对于行内元素 : text-align: center; 对于确定宽度的块级元素：（1）width和margin实现。...不显示对应的元素，在文档布局中不再分配空间（回流+重绘）该问题会引出回流和重绘用CSS实现三角符号 /*记忆口诀：盒子宽高均为零，三面边框皆透明。...也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。 3.百分比布局通过百分比单位 " % " 来实现响应式的效果。...缺点：（1）计算困难（2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

4.4K1 0

HTML详解连载（6）

开始喽 CSS特性优简代码/定位问题，并解决问题继承性层叠性优先级继承性子级默认继承父级的文字控制属性注意标签自己有样式，则生效自己的样式，不继承层叠性特点相同的属性会覆盖...backgro-size（bgz）常用属性值关键字含义 cover 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 contain 等比例缩放背景图片以完全装入背景区，可能背景区部分空白 百分比...background(bg) 属性值背景色，背景图，背景图平铺方式，背景图位置/背景图缩放，背景图固定（空格隔开，不区分顺序）显示模式标签（元素）的显示方式作用布局网页的时候，根据标签的显示模式选择合适的标签摆放内容...块级元素位置独占一行宽度默认是父级的1000% 添加宽高属性生效行内元素位置一行共存多个尺寸尺寸由内容撑开加宽高不生效行内块元素位置一行共存多个尺寸设置宽高属性生效...默认尺寸由内容撑开转换显示模式属性名 display 关键字含义属性值效果 block 块级 inline-block 行内块 inline 行内

1512 0

从box-sizing:border-box属性入手，来了解盒模型

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？...,375px和414px尺寸下，显示的效果图：二、盒模型的其他属性（1）margin，padding设置为百分比形式：给元素的内边距和外边距的各个边设置为5%...类型是：block，inline,inline-block，即块框（block box）,行内框（inline box）,行内块状框（inline-block box）....注意：默认状态下display属性值，块级元素display:block，行内元素display:inline。...：这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。

2.1K1 0

从box-sizing:border-box属性入手，来了解盒模型

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？...,375px和414px尺寸下，显示的效果图：二、盒模型的其他属性（1）margin，padding设置为百分比形式：给元素的内边距和外边距的各个边设置为5%...类型是：block，inline,inline-block，即块框（block box）,行内框（inline box）,行内块状框（inline-block box）....注意：默认状态下display属性值，块级元素display:block，行内元素display:inline。...：这类情况通常用于响应式网页设计，将一个布局的外层容器的宽度设置为百分比形式。

1.6K2 0

web前端常见面试题归纳

行内元素和块元素的区别概念块元素：默认独占一行，页面中垂直排列，宽高和内外边距可控行内元素：默认同行排列，宽高由内容决定行内元素和块元素举例块元素：、、、...行内元素：、、、行内元素和块元素的相互转换 display:inline;将块元素转换为行内元素 display:block;将行内元素转换为块元素 display...Webkit又到了Blink内核常见的浏览器兼容性问题有哪些浏览器兼容问题产生的原因因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能打到理想效果...） 百分比布局：因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往很难统一，在移动端适配中使用是很少的。...常见的响应式布局方式有哪些流式布局，也叫百分比布局，将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩栈格系统（Grid System）将一个页面划分为几个主要区域，定义这些区域的大小、位置、层次等关系

9882 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭