- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我最近发现支持display: flex
,但是在IE11中满是bug。现在我无法使基于网格的简单菜单正常工作。
我有一组按钮,可以根据窗口大小调整它们的大小。他们使用 flexbox 和绝对定位方法,将 top、bottom、left 和 right 设置为 0。
然而,这在IE11中显示不正确,我需要支持。我曾试图找出原因,但由于IE 极差的调试工具,我一直未能找到。我已尝试解决所有已知的错误和问题,声明 here.但是,它们都不适用于我。我设置了最小宽度,但没有设置最小高度。我还尝试查看是否可以将相同的错误应用于水平轴,作为 verticalm 但它没有区别,试图通过设置宽度以及最小和最大宽度来解决它。好消息是 IE 现在终于可以与 JSFiddle 一起使用了,所以我可以轻松地重现错误。
如何让元素像在 Chrome 中一样显示?
https://jsfiddle.net/7oa3dzvk/
HTML:
<body><div class="wrapper"><div class="middle"><div class="centering-container"><div class="container"><div class="row"><div class="col-sm-6 col-xs-12"><div class="container"><div class="row padding-top">
<div class=" col-xs-6">
<div class="square-box pull-right">
<div class="auto-height-ratio-content E-envi" onclick="listTestBanksByEnvironment('E')">E</div>
</div>
</div>
<div class="col-xs-6 ">
<div class="square-box">
<div class="auto-height-ratio-content F-envi" onclick="listTestBanksByEnvironment('F')">
<div class="center-text ">F</div>
</div>
</div>
</div>
</div></div></div></div></div></div></div></div></body>
CSS:(与底部最相关,因为其中大部分是 Bootstrap 生成的,但对于完整的示例仍然需要)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
font-family: Lato;
}
* {
outline: none;
}
body {
margin: 0;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.padding-top {
padding-top: 30px;
}
.container {
overflow: hidden;
}
.container {
display: block;
width: auto;
background: #FAFAFA;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
display: table;
content: " ";
}
.btn-group-vertical > .btn-group::after, .btn-toolbar::after, .clearfix::after, .container-fluid::after, .container::after, .dl-horizontal dd::after, .form-horizontal .form-group::after, .modal-footer::after, .nav::after, .navbar-collapse::after, .navbar-header::after, .navbar::after, .pager::after, .panel-body::after, .row::after {
clear: both;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* @media all and (min-width:768px) */
.container {
width: 750px;
}
/* @media all and (min-width:992px) */
.container {
width: 970px;
}
/* @media all and (min-width:1200px) */
.container {
width: 1170px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
float: left;
}
.col-xs-12 {
width: 100%;
}
/* @media all and (min-width:768px) */
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
/* @media all and (min-width:768px) */
.col-sm-6 {
width: 50%;
}
.middle {
width: 100%;
margin-top: 65px;
position: relative;
}
.wrapper {
max-width: 1280px;
margin: 0 auto;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.4285;
color: #333;
background-color: #fff;
}
body {
width: 100%;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col-xs-6 {
width: 50%;
}
.pull-right {
float: right;
}
.square-box {
position: relative;
min-width: 70px;
max-width: 150px;
width: 100%;
font-size: 75px;
display: flex;
align-items: center;
justify-content: center;
}
.square-box::before {
content: "";
padding-top: 100%;
}
.F-envi {
background-color: #99bfc2;
color: #003946;
}
.E-envi {
background-color: #d1c99d;
color: #003946;
}
.auto-height-ratio-content {
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-webkit-transition: all 0.2s;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.pull-right {
float: right;
}
.pull-right {
float: right !important;
}
最佳答案
IE 的前缀没有添加到 css 中。 autoprefixer.github.io/ - 将有助于添加适当的前缀。
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
请检查 fiddle - https://jsfiddle.net/afelixj/7oa3dzvk/3/
此外,position:absolute;
不适用于 flex。所以使用flex-grow
来拉伸(stretch)内容。
关于css - IE11 display :flex is giving me grief. 为什么显示不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36424871/
编译器知道AbstractDemo是一个抽象类,抽象类不能被实例化。 但是当我调用 newInstance() 方法时,为什么它没有给出编译时错误? import java.lang.reflect.
假设我有如下数据类型: data Cell = Cell (Maybe Player) data Board = Board [[Cell]] 现在我想生成一个这样的递归函数: genBoard
当谈到使用 OpenMP 和 TBB 进行共享内存编程时,我是一个初学者。 我正在实现 QuickHull 算法 ( http://en.wikipedia.org/wiki/QuickHull )
我想创建一个随机列表与列表中元素的不同组合。出现在最终列表中的每个元素的计数应该相同。。例如。在这里,我期望所有元素的计数都是10,因为我给了相同的权重。但这并不总是一样的。如何修改代码以使所有元素的
我想创建一个随机列表与列表中元素的不同组合。出现在最终列表中的每个元素的计数应该相同。。例如。在这里,我期望所有元素的计数都是10,因为我给了相同的权重。但这并不总是一样的。如何修改代码以使所有元素的
以下将显示在 Firebug 或 jsconsole.com 中或在其他 Javascript 交互式控制台中: >>> foo = { a : 1, b : 2.2 } Object { a=1,
在 Azure DevOps 管道中的一项任务中,我尝试停止 IIS 服务器。这可以通过在命令提示符中调用命令net stop WAS来实现。手动执行此操作,它会要求确认 手动方式,我只需按 Y EN
在 Azure DevOps 管道中的一项任务中,我尝试停止 IIS 服务器。这可以通过在命令提示符中调用命令net stop WAS来实现。手动执行此操作,它会要求确认 手动方式,我只需按 Y EN
在 R 编码中出现以下错误。 在我的 Brand_X.xlsx 数据集中,我尝试使用 KNN 插补法计算的 NA 值很少,但我得到的结果低于错误。这里有什么问题吗?谢谢! > library(read
在 Android Studio 中,我希望我的每个应用变体都有自己的图标。 我尝试了各种方法,包括此处建议的方法 How to provide different Android app icons
JSFiddle 示例代码:http://jsfiddle.net/SUMPq/8/ 我在容器上有一些文本,代码位于 HTML 的顶部,靠近正文: Heading TAG SOME TEXTSOM
所以我正在实现这个简单的剃须刀支付集成。但它给我一个“没有找到合适的付款方式”的错误。我之前尝试过选择付款选项表,但也没有用。 val razorpay = RazorpayClient("my
Closed. This question needs to be more focused。它当前不接受答案。 想要改善这个问题吗?更新问题,使它仅关注editing this post的一个问题。
我在玩 elm-css . 大多数事情都按我的预期工作。 但是我无法为 Css.opacity 提供正确的值功能。 这是我尝试过的: Css.opacity 0.5 这给出了错误: Function
请参阅以下代码: UIImage *image; NSString *str = [[[Data getInstance]arrPic]objectAtIndex:rowIndex]; NSLog(s
这个问题已经有答案了: "Notice: Undefined variable", "Notice: Undefined index", "Warning: Undefined array key",
我正在测试一个用于修改文件的工具,在此过程中一个相当重要的功能是告诉文件大小,尤其是当文件仍然打开时。 $file = tempnam('/tmp', 'test_'); file_put_conte
我是Java/Maven新手,我正在尝试构建一个maven Spring Boot项目,它很早就可以工作并且也成功创建了jar包。但它突然停止工作并开始出现 Maven 编译错误。 我知道它与 pom
我正在尝试让我的 pom.xml 在我的 JAXB 对象上生成 hashCode() 和 equals method()。 4.0.0 0.0.1-SNAPSHOT jar
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
我是一名优秀的程序员,十分优秀!