IE11在网格居中时忽略项目内容的绝对宽度

是指在使用CSS网格布局时，IE11浏览器在某些情况下无法正确处理项目内容的绝对宽度，导致项目内容无法居中显示。

CSS网格布局是一种强大的布局方式，可以将页面划分为行和列，通过定义网格容器和网格项目来实现灵活的布局。然而，IE11对CSS网格布局的支持存在一些限制和兼容性问题。

在IE11中，当使用网格布局并将项目内容的绝对宽度设置为固定值时，例如使用width: 100px;，项目内容在居中对齐时会被忽略，导致内容不居中显示。这是因为IE11在计算项目的位置时没有正确考虑项目内容的绝对宽度。

解决这个问题的方法是使用其他方式来实现居中对齐，例如使用自动布局或使用其他CSS属性来控制项目的位置。可以使用justify-self: center;和align-self: center;属性来实现水平和垂直居中对齐。

腾讯云相关产品中，可以使用云服务器（CVM）来搭建网站和应用程序，通过自定义的CSS样式来解决IE11在网格居中时忽略项目内容的绝对宽度的问题。腾讯云云服务器（CVM）是一种灵活可扩展的云计算产品，提供稳定可靠的计算能力，适用于各种规模的业务需求。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

相关·内容

CSS 中你需要知道 auto 的一切！

这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。我们可以使用下面方法让具有绝对定位元素居中：设置的宽度和高度。...在CSS Grid中，我们可以设置一个列为auto，这意味着它的宽度将基于它的内容长度。...当我们有一个网格，并且其中的网格项目具有margin-left: auto时：该项目将被推到右边，其宽度将基于其内容长度考虑下面的例子： ? 当我们希望item1的宽度基于其内容，而不是网格区域。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。

5.5K3 0

HarmonyOS应用开发-低代码开发登录页

操作：在列容器(Cloumn)里拖一个行容器(Row)过去，宽度(width)设置为 100%，高度(height)设置为 100vp，设置水平居中、垂直居中，位置为绝对定位(Position)，距离页面上方...定义组件的属性：设置组件宽度(Width)为 90%，高度(Height)为 40vp；内容为”登录”，字体默认居中，字体大小为 20fp；组件位置为绝对定位(Position)，距离左侧为 5%...操作流程：首先，我们拖一个网格组件(Grid)，设置组件属性：组件宽度(width)设置为 100%，高度(height)设置为 10%；内容居中，绝对定位，距离顶部 90%；往网格组件(Guid...)里拖一个GuidItem组件，这是一个动态显示的子元素组件，会根据我们提供的参数动态进行内容显示，由于我们在设计上固定为行内显示3个，所以宽度就直接定为33.3%了。...文字(Text)组件：文字内容(Content)，我们先随便填个 “测试”；文本居中；组件宽度(width)设置为 100%，高度(height)设置为 24%；绝对定位，距离顶部 60%(60%

42924 23

多个你不知道的 CSS 居中方案！

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。水平居中内联元素要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。...： .desk { display: flex; justify-content: center; } 对于多个内联的项目，也可以正常工作： image.png CSS Grid 使用网格容器时...，图中的盘子将根据其网格区域居中。...在已知元素宽度的情况下，可以使用负边距代替CSS transform。....plate { position: absolute; top: 50%; margin-top: -60px; } CSS Grid 使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中

1.3K3 0

多个CSS 居中方案，你可能还不知道！水平居中垂直居中水平垂直居中

Flexbox 使用 flexbox 也可以快速居中元素： .desk { display: flex; justify-content: center; } 对于多个内联的项目，也可以正常工作...： image.png CSS Grid 使用网格容器时，图中的盘子将根据其网格区域居中。...CSS定位通过绝对定位，我们可以轻松地通过CSS transform将其水平居中。....plate { position: absolute; left: 50%; transform: translateX(-50%); } image.png 在已知元素宽度的情况下，....plate { position: absolute; top: 50%; margin-top: -60px; } CSS Grid 使用CSS网格，我们可以使用align-items将项目垂直于其网格区域居中

2.9K4 0

一文掌握css常见布局float、position、flex、grid

，但是跟绝对定位区别的一点是，该元素边产生了浮动流，以至于其相邻的元素会向右或者想左靠近该元素，而不是跟绝对定位一样，相邻的元素会忽略该元素的所在位置，直接铺满整个空间。...定义了项目在纵坐标的对其方式，主要用于当项目的高度不一致的时候如何显示，有以下几个值：flex-start: 顶部对齐flex-end：顶部对齐center：居中对齐baseline：项目的第一行文字基线对齐...项目属性 order该属性定义了项目的显示顺序，数值越小，排列越靠前，默认值为0，其实这个属性在项目初始展示的时候作用不大，还不如使用项目原始的显示顺序来显示，但是在需要动态调整项目的显示顺序的场景下比较有用...item的宽度项目属性 flex-grow定义了剩余空间如何利用，常用来当固定宽度的几个元素没有占满整个容器，然后剩余的宽度都由一个元素占满。...grid [网格]前面的flex布局主要针对一维布局，grid主要针对二维布局，也叫网格布局。

2761 0

【Web前端】CSS传统布局方法（补充）

二、两列布局的经典实现在实际的项目中，两列布局是一种非常常见的布局形式。常见的两列布局包括主内容区域和侧边栏，它们通常具有不同的宽度。...三、创建简单的传统网格框架 3.1 固定宽度网格固定宽度网格是最简单的网格布局之一，它通常用于较小的网页或定宽设计中。...浮动元素的顺序问题使用浮动布局时，元素的顺序是固定的，即元素在HTML文档中的排列顺序决定了它们在页面上的显示顺序。这对于需要不同屏幕大小下重新排序的响应式布局来说是一个很大的限制。...无法轻松实现复杂的网格布局浮动布局更适合简单的布局需求。当需要实现复杂的网格布局（如多列、多行且包含嵌套的子网格）时，浮动布局的代码会变得异常复杂且难以维护。...六、第三方网格系统在实际项目中，很多人喜欢使用第三方网格系统来加速开发，如 Bootstrap、Foundation 等。

861 0

CSS中各种布局的背后(*FC)

- 浮动(Floats) 在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。...- 绝对定位(Absolute positioning) 在绝对定位模型中，盒完全从常规流中脱离（对后面的同胞元素无影响）并根据包含块来分配位置。...当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。...应用场景水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。...item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

2.2K5 0

WEB 常用页面布局梳理和分析

还有一点是，这个是在定高的情况下，如果内容溢出或者不定高的话，float 也会有内容偏移的情况也要做一些处理。...使用绝对定位方法使用绝对定位的方就是将三个容器都定为绝对定位，左右侧 DIV 绝对定位且定宽，中间距离等于左侧宽度和右侧宽度。...使用网格布局这个可能有点兼容性问题，但也是可以慢慢尝试去使用，现在在项目上一般情况下也没有使用到这个方法。但这个方法用起来确实是很方便，几行代码就可以搞定。...，只是在高度上建议是使用 min-height，避免有些小机型展示会有问题，但现在基本上可以忽略了。...（不定高）不定高度在一段时间的前端面试中，那个是逢面必问的题目。

1.3K11 3

前端主流布局方法

padding和border再加上设置的宽高一起决定整个盒子的大小。在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。如何将标准盒模型转化为怪异盒模型？...div在默认情况下是块状元素，即display: block，对于块状元素，当不设置width时，其默认值为100%，也就是等于父元素的宽度。...绝对定位绝对定位的元素脱离了正常的文档流，绝对定位元素不占据文档流空间；与使用了float属性的div相似，具备了内联盒子的特性——在不设置width属性的时候，宽度由内容决定；同样，当内联盒子使用了绝对定位...Expand / 拓展绝对定位元素相对于最近的非static祖元素定位，当这样的祖元素不存在时，则相对于可视区域定位。...利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。

2.2K3 0

网页元素定位的详细解读

脱离文档流的影响：元素摆放忽略：当一个元素被绝对定位并脱离文档流后，文档流中的其他元素在摆放时会忽略这个元素。这意味着其他元素会好像这个绝对定位的元素不存在一样进行布局。...自动高度计算忽略：在文档流中元素计算自动高度时，也会忽略脱离文档流的绝对定位元素。这可能会影响到包含块的高度计算以及其他依赖于文档流布局的元素。...宽度自适应与包含块变化：宽度自适应：当绝对定位元素的宽度为auto时，它会适应内容的宽度。这意味着元素的宽度将根据其内部内容的大小自动调整。包含块变化：绝对定位元素的包含块会发生变化。...三、定位下的居中在绝对定位和固定定位中，可以通过以下步骤实现某个方向上的居中：定宽（高）：首先确定要居中的元素的宽度（或高度，如果是垂直方向上的居中）。...设置margin为auto：最后，将元素的margin设置为auto。在绝对定位和固定定位中，margin设置为auto时，会自动吸收剩余空间，从而实现元素在该方向上的居中。

2041 0

前端系列第3集-如何理解css盒子型?

可以使用CSS的flex布局或者绝对定位的方式来垂直居中一个盒子。...可以使用CSS的flex布局或者绝对定位的方式来垂直居中一个盒子。...可以使用CSS的绝对定位和负边距的方式来实现一个盒子在页面中居中。...CSS盒子模型计算盒子宽度和高度时，默认情况下是包括了所有这些部分的大小。可以通过box-sizing属性来改变盒子的盒模型，让它只包括内容区域和内边距的大小，或者只包括内容区域的大小。...768px时，项目的宽度将变为100%。

2541 0

17个场景，带你入门CSS布局

当 box-sizing 设置为 border-box 时，所占水平空间 = width值，内容宽度 = width值 - 左右padding值 - 左右边框宽度值。...值大于0时，就会撑满父元素宽度的剩余部分。...bottom: 100px; } 场景15 绝对定位元素的水平居中用left和transform可以实现绝对定位元素的水平居中。...绝对定位元素水平居中时，距定位元素左侧的值为 50%*定位元素宽度 - 50%*元素宽度。...用top和transform实现绝对定位元素的垂直居中。

2.7K2 0

html轮播图

.overall{ /* 设置窗口大小 */ width: 900px; height: 500px; /* 将弹性元素的所有项目的居中对齐...*/ display: grid; /* 设置网格布局中的列数及宽度 */ grid-template-columns: repeat...(3, 75px); /* 设置网格布局中的行数及宽度 */ grid-template-rows: auto; /* 设置网格行与列之间的间隙 */.../* 设置窗口大小 */ width: 900px; height: 500px; /* 将弹性元素的所有项目的居中对齐...*/ display: grid; /* 设置网格布局中的列数及宽度 */ grid-template-columns

1201 0

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

1.7K1 0

【CSS】最强大的布局之grid布局精讲

行和列整个grid页面布局是由行和列构成的，在使用grid布局时，需要单独设计行和列。 ...单元格每行每列都会分布单元格，在单元格内我们可以添加想要的内容。网格线格子的边框为网格线，分为上下网格线和左右网格线。...除了设置绝对值之外，也能设置百分比数（根据父级大小的百分比）等。...end - 对齐容器的结束边框。 center - 容器内部居中。 stretch - 项目大小没有指定时，拉伸占据整个网格容器 space-around - 每个项目两侧的间隔相等。...，在100px*100px内的方格内水平垂直居中，整个网格也水平居中在了页面中，如果不设置红色方块大小的话里面的文字将会水平垂直居中。

2.9K2 1

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

注意：当元素设置为绝对定位时，在没有指定top，bottom，left，right的值时，他们的值并不是0，这几个值是有默认值的，默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。...stretch - 项目大小没有指定时，拉伸占据整个网格容器 grid-auto-columns 属性和 grid-auto-rows 属性有时候，一些项目的指定位置，在现有网格的外部，就会产生显示网格和隐式网格...stretch：拉伸，占满单元格的整个宽度（默认值）应用场景文章开头就讲到，Grid是一个强大的布局，如一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的，在以前的文章中，也有使用

1511 1

【CSS】1287- 一行 CSS 实现 10 种强大的布局

.parent { display: grid; place-items: center; } 这使得内容能够在父级内完美居中，而不管内部大小。 02....在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。...这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。...在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(, , ) 。这将设置绝对最小和最大尺寸以及实际尺寸。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。

4.7K2 0

css实现布局垂直居中以及@media的用法总结

描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。...到此垂直居中已实现不同的设备访问网页效果却不同这是使用了@media width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。...grid:检测输出的设备是网格的还是位图设备。跳转链接 css中的@media用法总结

4864 0

CSS 基础系列：从清除浮动和margin塌陷问题谈BFC

如果父元素的宽度足以包含这两个子元素的宽度之和，则子兄弟元素和子浮动元素并排。如图： image.png 如果父元素的宽度不足以包含这两个子元素的宽度之和，则子兄弟元素会出现在子浮动元素的下面。...水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。...垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。...rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid...在 CSS2.1 中，有三种定位方案 ———— 普通流、浮动和绝对定位，下面分别对这三种布局简略说明一下：普通流(Normal flow) 在普通流中，盒一个接着一个排列; 在块级格式化上下文里面，它们竖着排列

2.5K1 0

前端：水平垂直居中的10种方法

第一种：通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示...借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了优点：比较好理解，兼容性好缺点：需要知道子元素的宽高 ---- 第二种...--- 第三种： absolute + calc（计算）这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了 calc :任何长度值都可以使用calc()函数进行计算； calc...所以在文本水平垂直居中时使用。...---- 第七种： table 形式通过table单元格的形式设优点： tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了缺点：这个不是table的正确方法，不是很建议使用

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云