显示: ie11中flex容器上的before元素

在IE11中，Flexbox布局是部分支持的，但是在Flex容器上使用:before伪元素可能会遇到一些问题。在IE11中，Flex容器上的:before伪元素可能无法正确地应用Flexbox属性。

Flexbox是一种用于创建灵活的、自适应的布局的CSS模块。它通过将容器内的元素进行排列和对齐来实现布局。在Flex容器上使用:before伪元素可以在容器的起始位置添加一个额外的元素。

然而，在IE11中，Flex容器上的:before伪元素可能无法正确地应用Flexbox属性。这意味着在IE11中，:before伪元素可能无法正确地参与Flexbox布局，并且可能会导致布局出现问题。

为了解决这个问题，可以考虑使用其他方法来实现类似的效果，例如使用实际的元素而不是:before伪元素，或者使用其他CSS属性来实现所需的布局效果。

总结起来，在IE11中，Flex容器上的:before伪元素可能无法正确应用Flexbox属性，可能会导致布局问题。因此，建议使用其他方法来实现类似的效果。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
视频直播（CSS）：https://cloud.tencent.com/product/css
区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain

相关·内容

当flex容器中包含absolute元素时

在PC端和iphone5以上的机型中：居中显示（正常） ?...在PC端和iphone5以上的机型中：在容器内的最右端（正常） ?...在iphone5真机上的浏览器打开：跑到容器外了（异常）当我们把绿色块改成相对定位时.div2{ position: relative; }，就会发现flex布局在任何机子上都正常了。...也许将来这种兼容差异就不存在了，flex容器里面也可以有绝对定位元素了。三、替代方案问题原因是找到了，但还是得解决实际问题。...参考文献： flex布局中的绝对定位：嗯，完美。还给出了w3.org的技术文档说明。

3.6K2 0

给元素添加伪类 :before 不显示的解决方法

尝试给元素添加伪类，但是一直不显示。...HTML：我要前缀我要前缀 CSS： .before:before{ display...: inline-block; width: 10px; height: 10px; background: rgba(255,0,0,.3); } 显示效果： ?...如果使用图片或者需要设置宽高，需要将伪类元素设置为 inline-block 或者 block ，并设置高宽。...,.3); } 这样就可以正常显示了： ?

11K0 0

CSS 3.0中伪元素after和before的妙用

我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 ?...以下是代码实现，希望能对初学者有一个简单的认识。 CSS 3.0中伪元素...after和before的妙用 /* 面包屑导航 */ .breadcrumb {...first-child { color: #82fcfd; } .breadcrumb a:first-child::before

1.1K1 0

9102 年了，还在兼容 IE11 是什么样的体验

PC 项目可能真的无法避免吧… strict 模式下不允许分配到只读属性 reactjs IE11 中 DOM 的 style 属性是 read only 的，直接赋值 ele.style =xxx的话就会报上述错误...，改正方法是一个个属性去赋值，比如 ele.style.backgroun = 'xxxx' flexbox 语法支持度不好，known issues 可以在 caniuse 上查特别是 flex-direction...: column 如果没有给明确的 height ，容器无法用内部元素撑起来，视觉上内部元素会超过容器范围；只有 min-height 没有 height 的也会类似的显示问题； align-items...IE11 不支持 new Date('1970-01-01 00:00:00') 语法，需要换成用 / 分割的new Date('1970/01/01 00:00:00') IE11 以下的浏览器是不支持...但即使安装了，也可能出现拒绝方法的报错（这个报错目前我无法解决，搜到的方法基本上需要在浏览器设置或者 adobe reader 的设置上做一些操作，按照指引操作后，均失败）

1.1K2 0

干货：CSS 专业技巧

使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。...任何元素，任何时间，任何地点？CSS-Tricks 有篇好文讲到了各种居中的技巧。注意： IE11 对 flexbox 的支持有点 bug。...这个名字可能比较陌生，不过通用选择器 ( *) 和相邻兄弟选择器 ( +) 一起使用，效果非凡： * + * { margin-top: 1.5em;} 在此示例中，文档流中的所有的相邻兄弟元素将都将设置...利用属性选择器来选择空链接当元素没有文本内容，但有 href 属性的时候，显示它的 href 属性： a[href^="http"]:empty::before { content: attr...dancer: 支持情况这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。

1.5K5 0

分享：12个CSS小技巧，让你的代码简洁高效

使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： .nav li:first-child ~ li { border-left: 1px solid #666; } 给 body...注：在IE11中要小心flexbox。...优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing...使用属性选择器用于空链接当元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)

8522 0

12 个 Css 小技巧

使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height...当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： .nav li:first-child ~ li { border-left: 1px solid #666; } 给 body...注：在IE11中要小心flexbox。...优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing...使用属性选择器用于空链接当元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href)

1.1K1 0

弹性布局图片变形

问题图示变形的图片 ? 变形的图片正常的图片 ? 正常的图片解决方案方案1：用 div 标签包裹 img 标签用div标签包裹图片，这种方案比较通用。...方案2：flex-shrink: 0 给 img 设置 flex-shrink: 0; flex-shrink 的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩...flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。缺点：仅兼容IE11。...如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。方案3：img 设置 height: 100% 在父元素没有设置高度的情况下，给图片设置 height: 100%;

1.7K1 0

前端成神之路-移动web开发_flex布局

flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。...它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。...：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction...flex-wrap属性定义，flex布局中默认是不换行的。...从头部开始 flex-end 从尾部开始 center 居中显示 stretch 拉伸 3.5 align-content 设置侧轴上的子元素的排列方式（多行）设置子项在侧轴上的排列方式并且只能用于子项出现

6842 1

移动web开发_flex布局

6442 0

jQuery 中在元素中添加插入内容方法 after, append, appendTo, before, prepend, prependTo 的区别

jQuery 在元素中添加插入内容的方法和区别，整理成表格，省的每次都要翻： jQuery方法解释 after() 在被选元素之后插入指定内容 insertAfter() 在被选元素之后插入 HTML...append() 在被选元素的结尾（仍然在内部）插入指定内容 appendTo() 在被选元素的结尾（仍然在内部）插入 HTML 标记或已有的元素。...before() 在被选元素之前插入指定内容 insertBefore() 在被选元素之前插入 HTML 标记或已有的元素。如果用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。...prepend() 在被选元素的开头（仍然在内部）插入指定内容 prependTo() 在被选元素的开头（仍然在内部）插入 HTML 标记或已有的元素千言解释不如一图示意：具体代码： 3. before'); $target.after('4. after'); $('<

1.8K3 0

移动web开发之flex布局（弹性布局）

IE11或更低版本不支持或仅部分支持 1.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。...采用flex布局的元素，称为flex容器（flex container），简称“容器”。...它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。...justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items...重要） 1.3.3flex-wrap设置子元素是否换行默认情况下，项目都排列在一条线上（又称轴线）上，flex-wrap属性定义，flex布局中默认是不换行的 1.3.4 align-items设置侧轴上子元素排列方式

1K3 0

.移动端常见布局

IE11或更低版本不支持或仅部分支持 6.2.2布局原理 flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。...flex容器（flex container），简称“容器”。...它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”。...:设置主轴方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行）...重要） 6.2.3.3flex-wrap设置子元素是否换行默认情况下，项目都排列在一条线上（又称轴线）上，flex-wrap属性定义，flex布局中默认是不换行的 6.2.3.4 align-items

7643 1

AngularDart Material Design 工具提示顶

materialTooltip String 要在工具提示中显示的文本。..., enter, 和 space上显示和隐藏工具提示的指令。...end：将弹出窗口对齐到容器的末尾。这相当于'flex-end'。 before：在容器前对齐弹出窗口。这不等同于任何CSS定位模型。 ...end：将弹出窗口对齐到容器的末尾。这相当于'flex-end'。 before：在容器前对齐弹出窗口。这不等同于任何CSS定位模型。 ...for TooltipTarget 此工具提示所针对的元素。这通常通过使用引用变量在模板中设置。

1.3K2 0

20个常用的CSS技巧，收藏就是捡到

黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？...使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 /* add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素...注意：在IE11中要小心flexbox。 6....优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing...使用属性选择器用于空链接当a元素没有文本值，但 href 属性有链接的时候显示链接 a[href^="http"]:empty::before { content: attr(href); } 相当方便

4173 0

常用的 CSS 技巧

原文 - 黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？...当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）： ..nav li:first-child ~ li { border-left: 1px solid #666; } 页面顶部阴影...注意：在IE11中要小心flexbox。...优化显示文本有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你： html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing...使用属性选择器用于空链接当a元素没有文本值，但 href 属性有链接的时候显示链接： a[href^="http"]:empty::before { content: attr(href); }

7090 0

148道 CSS 与 JavaScript 基础面试题

想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after ；在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后。...比如说，我们可以通过 ::before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。 5. CSS 中哪些属性可以继承？...说明他们的作用。 block 块类型，默认宽度为父元素宽度，可设置宽高，换行显示。 none 元素不显示，并从文档流中移除。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。...采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。...以下6个属性设置在容器上： flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-wrap属性定义，如果一条轴线排不下，如何换行。

1.1K2 0

九宫格布局

解决办法一：flex布局 + padding-bottom 解决思路：使用flex弹性布局，使子元素成为容器成员父元素使用flex-wrap: wrap;将flex 元素被打断到多个行中 CSS...flex-wrap 指定 flex 元素单行显示还是多行显示。...如果允许换行，这个属性允许你控制行的堆叠方向。取值如下： nowrap flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。...cross-start 会根据 flex-direction 的值相当于 start 或 before。 wrap flex 元素被打断到多个行中。...该属性设置元素下内边距的宽度。行内非替换元素上设置的下内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。

1.8K3 1

css实现圆角渐变边框

，实现圆角动态渐变边框使用伪元素 ::before 创建一个覆盖整个容器的渐变背景，并通过CSS动画实现背景的旋转效果，从而形成动态渐变边框。...详见CodePen demo 实现要点伪元素 ::before：用来创建渐变背景。 overflow: hidden：隐藏渐变背景超出的部分，形成边框效果。...，通过调整伪元素位置，形成边框效果通过伪元素 ::before 在容器内创建一个渐变边框，通过调整伪元素的位置和大小来形成边框效果。...::before 创建渐变背景，结合遮罩技术控制边框的显示。...实现要点伪元素 ::before：创建渐变背景。遮罩技术 -webkit-mask：控制边框效果，通过遮罩技术显示边框。 padding：用于设置边框的宽度。

1201 0

【CSS】378- 44个 CSS 精选知识点

让图片在容器中显示的更舒适设置图像在其容器内的适合度和位置，同时保留其宽高比。以前只能使用背景图像和background-size属性来实现。...可在 CodePen 上查看真实效果和编辑代码说明 object-fit:contain 容器内显示整个图像，并且保持宽高比 object-fit:cover 用图像填充容器，并保持宽高比 object-position...可在 CodePen 上查看真实效果和编辑代码说明 height:100% 将容器的高度设为视口的高度 display:flex 启用 flex flex-direction:column 将项目的顺序设置成从上到下...flex-grow:1 flexbox会将容器的剩余可用空间应用于最后一个子元素。...浏览器支持程度 82.9% IE11或当前版本的Edge不支持。caniuse 21. 指定元素的全屏 :fullsrcreen 全屏伪类表示浏览器处于全屏模式时显示的元素。

5.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云