display:-webkit-box；在IE浏览器中不兼容问题

最新推荐文章于 2024-08-02 12:09:11 发布
最新推荐文章于 2024-08-02 12:09:11 发布
阅读量3.8k 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganjingjie/article/details/108316197
版权

问题：在IE里面不兼容，右边那部分掉下去了

 

解决方案：

         加一句display: -ms-flexbox;代码就可以兼容IE了（只能兼容到IE10），

         display: -webkit-box; （Chrome 4+, Safari 3.1, iOS Safari 3.2+）

         display: -moz-box; （Firefox 17-）

         display: -webkit-flex; （Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16）

         display: -moz-flex; （Firefox 18+ ）

         display: flex;（Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ 

干净洁
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ie兼容display:box
weixin_30735745的博客
09-25 153
在我们遇到左边图片，右边一段文字，这样的，一段宽度固定，一段宽度不定的情况，我们会用display:box来解决，但是，ie却不会兼容，这样就有以下一种方法 html代码 <div> <img class="img" src="xxxxx"/> <div class="title">xxxxxxxxxxxxx</div> </di...
Display属性学习总结
爱是与世界平行
04-19 988
HTMl元素根据表现形式，常见的可以分为两类。（1）块元素（block） （2）行内元素（inline)。 当然，除了以上两种元素类型外，还有inline-block、table-cell等元素类型。对于这些元素的运用，就需要通过display来编码，对于display学习的掌握，可以将网页做得更加完善和美观。
常见浏览器兼容性问题与解决方案
塞外游侠的专栏
08-25 2651
<br />      所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。<br />51CTO推荐阅读：完全免费 跨浏览器兼容测试8大利器<br />在学习浏览器兼容性之前，我想把前端开发人员划分为两类：<br />第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他
超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)多谢
黑客与画家
07-09 658
注明：内容于http://www.cnblogs.com/chentongtong/p/5474553.html进一步整理。 1、现webkit内核的浏览器支持display: -webkit-box;属性， 所以网页中显示两行文字，超出部分省略，可以用样式 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webki...
弹性布局各种坑爹兼容
weixin_30823227的博客
10-05 910
当然也看到过遇到flexbox布局的属性将所有的新的老的前缀都加上的，这样省事啊 谁闲着没事整天研究那几个属性的兼容，更可况前端发展这么快说不定有更牛逼的样式出现 但是想在移动端用好这个布局摸透这个属性 我还是一个个都探究下吧，在此先说下各浏览器PC端最新版本情况目前：IE最新版本是ie11， FF最新版本是ff41.0， Chrome最新版本是chrome45.0， Safira最新版本8.0...
display:box浏览器兼容性
farmerXU的博客
08-13 2498
原文地址：http://www.cnblogs.com/walk-on-the-way/p/5997073.html display:box浏览器兼容性 总的来说，不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持。 display:box兼容性的写法...
IE8+等兼容、360调用webkit内核小记
weixin_30685029的博客
06-16 106
首先是处理IE8、9等的兼容问题，注意以下几点： 　　1，尽可能严格要求自己使用w3c推荐的方式编写html/css 　　2，在html页面顶部添加<!DOCHTML html>，不清楚请查看参考/推荐博客 　　3，使用meta标签调节浏览器的渲染方式<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ...
display:box的兼容写法
csacx的博客
09-23 2122
五字真言 .box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; /* box-orient */ /** * vertical column
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
本文将详细介绍如何在兼容IE浏览器的情况下，使用CSS实现DIV元素的垂直居中。首先，我们需要明确一点，CSS中的`vertical-align`属性主要用于表格单元格（如`<td>`）和其他内联元素的垂直对齐，而不是用于块级元素如`...
DIV+CSS网页中IE和火狐兼容问题的整理
08-02
- IE浏览器对CSS3新属性的支持较晚，如`transform`、`transition`、`border-radius`等。 - Firefox、Chrome等浏览器对CSS3有较好的支持。 解决方法：使用浏览器前缀 `-webkit-`, `-moz-`, `-ms-`, `-o-` 来分别...
html IE兼容问题
05-11
HTML和CSS在IE浏览器中的兼容性问题是一直困扰前端开发者的重要课题。由于Internet Explorer（IE）的历史版本在标准支持上存在显著差异，特别是在CSS样式方面，导致开发者在创建跨浏览器的网页时需采取额外措施来...
DIV border边框显示不完全问题的解决方法
10-30
在IE浏览器中，由于其对CSS标准的不完全支持，可能会出现边框显示不全的现象。 针对这个问题，给出的解决方案是在`div`样式中添加一个`background-color`属性。原CSS代码如下： ```css #divproject { margin-top:...
button按钮在 IE 中两边被拉伸的解决办法
05-25
在IE浏览器中，当`<button>`元素内部包含文字或图像时，可能会由于默认样式和盒模型差异，导致按钮内容在水平方向上被拉伸。这通常是由于IE的盒模型与W3C标准盒模型不同，以及IE对内联元素的渲染方式造成的。 ### ...
vue webpack打包 -webkit-box-orient 失效
qq_35149546的博客
08-21 182
1.vue webpack打包 -webkit-box-orient 失效
-webkit-box-clamp失效和-webkit-box-orient:vertical被过滤
baidu_33614459的博客
03-15 1337
在使用-webkit-box-clamp:2一直失效 .content{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow:ellipsis; } 网上也找了解决方法，但是没有用。最后发现控制台少了-webk...
小白VUE学习笔记4：不同报错的解决方法（持续更新）
爱吃牛肉的政
11-28 1051
1、Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 其实报错已经说的很清楚了，大致意思就是 VUE的模板组件只能有一个根对象 ，相当于说 &lt;templ...
flex布局(弹性盒)兼容性写法 兼容ie10 谷歌 火狐
希文Gershwin
08-19 8485
1.容器写法 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ di...
css3自学笔记（3）
qq_46335785的博客
05-25 241
1：定位 1.1：为什么需要定位 1：有一些效果标准流和浮动都无法实现，此时需要定位来实现 2：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列的盒子。 3：定位则是可以让盒子自由的在某个盒子内部移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子。 1.2定位的组成 定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位=定位模式+边偏移 ...
css-grid布局之美
最新发布
魏晋-
08-02 308
是一个 CSS 简写属性，可以用来设置以下属性： 显式网格属性。
/* 全局css变量 */ $--color-primary: #409EFF; .primary-color { color: #409EFF; } .background-opacity { background: rgba(64, 158, 255, 0.6); } .form-widget-list { .ghost{ content: ''; font-size: 0; height: 3px; box-sizing: border-box; background: #409EFF; border: 2px solid #409EFF; outline-width: 0; padding: 0; overflow: hidden; } } .el-form-item--medium { .el-radio { line-height: 36px !important; } .el-rate{ margin-top: 8px; } } .el-form-item--small { .el-radio { line-height: 32px !important; } .el-rate{ margin-top: 6px; } } .el-form-item--mini { .el-radio { line-height: 28px !important; } .el-rate{ margin-top: 4px; } } .el-card { margin-top: 3px; margin-bottom: 3px; } input[type="password"]::-ms-reveal { /* 隐藏IE/Edge原生的密码查看按钮 */ display: none; } /* 滚动条样式 begin */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { width: 8px; background: rgba(#101F1C, 0.1); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: rgba(#101F1C, 0.35); background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(#101F1C, 0.85); } * {//Firefox浏览器滚动条样式 scrollbar-color: #e5e5e5 #f7f7f9; //滚动条轨道颜色、滚动条滑块的颜色 scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失 } /* body {//IE浏览器滚动条样式 scrollbar-shadow-color: #e5e5e5; scrollbar-face-color: #e5e5e5; scrollbar-base-color: #ffffff; scrollbar-arrow-color: #444040; } */ /* 滚动条样式 end */
06-10
这段代码定义了一些全局的 CSS 变量和样式，包括： - 定义了一个名为 `$--color-primary` 的全局 CSS 变量，其值为 `#409EFF`。 - 定义了一个名为 `.primary-color` 的样式类，将其文本颜色设置为 `$--color-primary` 定义的颜色。 - 定义了一个名为 `.background-opacity` 的样式类，将其背景色设置为带有 60% 不透明度的蓝色。 - 定义了一个名为 `.form-widget-list` 的样式类，其中包含了一个名为 `.ghost` 的子样式类，将其高度设置为 3 像素，颜色设置为 `$--color-primary` 定义的颜色，边框为 2 像素宽的 `$--color-primary` 定义的颜色。 - 定义了 `.el-form-item--medium`、`.el-form-item--small` 和 `.el-form-item--mini` 三个样式类，分别对应中、小、迷你三种表单元素大小，对其内部的单选框和评分控件进行了样式调整。 - 定义了 `.el-card` 样式类，将其上下 margin 值设置为 3 像素。 - 定义了一些滚动条的样式，包括滚动条宽度、颜色等等。其中包括针对不同浏览器的样式设置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值