当前位置: 首页 > 面试题库 >

为什么不证明内容合理:中心在IE中起作用?

吕霍英
2023-03-14
问题内容

我有一个简单的div,里面有一个按钮。justify-content:center;使用Firefox和Chrome可以正常工作,但不适用于IE 11:

#div {

  height: 200px;

  width: 50px;

  border: 1px solid black;

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

}

#button {

  height: 50px;

  width: 200px;

  min-width: 200px;

  border: 1px solid black;

  background-color: red;

}


<div id="div">

  <button id="button">HELLO</button>

</div>

我的目标是,当我transformrotate(90deg)或一起使用时rotate(270deg),该按钮将适合div:

#div {

  height: 200px;

  width: 50px;

  border: 1px solid black;

  display: flex;

  flex: 0 0 auto;

  align-items: center;

  justify-content: center;

}

#button {

  height: 50px;

  width: 200px;

  min-width: 200px;

  border: 1px solid black;

  background-color: red;

  transform: rotate(90deg);

}


<div id="div">

  <button id="button">HELLO</button>

</div>

heightwidthdivbutton始终是相同的,但是是可定制的。

我尽可能不包装元素。


问题答案:

IE11需要父母拥有flex-direction: column

此示例旋转了按钮:

#div {

  height: 200px;

  width: 50px;

  border: 1px solid black;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column

}

#button {

  height: 50px;

  width: 200px;

  min-width: 200px;

  border: 1px solid black;

  background-color: red;

  transform: rotate(90deg);

}


<div id="div">

  <button id="button">HELLO</button>

</div>


 类似资料:
  • 我试图让一个元素向右对齐。我使用了flexbox,因为我发现最容易将文本和任何图标完美对齐。下面的代码片段是我正在做的一个示例。该代码在Firefox和Chrome中运行良好,但在IE中无法使用justify内容。我已经有了“-ms flex pack”,但它没有做任何事情。IE中的内容是左对齐的,而不是右对齐的。

  • 问题内容: 下面的代码在IE 11中不起作用,它在控制台中引发语法错误 使用二部图进行可视化 此代码导致上述声明中的问题 问题答案: 您正在使用箭头功能。IE11不支持它们。使用函数代替。 这是Babel将其翻译成ES5的内容:

  • 我有一个非常简单的JSF 2/Facelets页面,如下所示: 支持bean提供了一个 消息。因此,在

  • 问题内容: 我有几列使用flex给出相等的宽度。每个都包含标签,我希望这些图像显示尺寸。 如本演示中所示,图像没有调整大小。这是为什么? 问题答案: 从规格: 该属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。 关键术语是: 根据其使用的高度和宽度安装到盒子中 图像将被替换,而不是其容器。并且由其使用的高度和宽度确定的框与图像本身有关,而不与容器有关。 因此,报废容器并使图像本

  • 问题内容: 由于某种原因,似乎响应JS无法正常工作。我正在IE 8中使用媒体查询来更改各种大小的监视器的背景图像。在IE 8中,没有背景,只有纯色。 代码如下: 媒体查询如下所示: 上面的代码在IE 8中无法工作是有原因的吗?我还应该尝试使用另一个JS来使IE 8 Media Queries工作吗? 注意:看来html5-shiv确实有效。我正在实时Web服务器上进行测试。 问题答案: 同样的问题

  • 问题内容: 我有以下功能 但是 在ie7中不起作用,那我该怎么办!我想将光标放在输入中! 谢谢 更新 很好的解决方案,谢谢,但是现在在opera中不起作用:( 问题答案: 对于IE,您需要使用settimeout函数,因为它很懒,例如: 对于opera,这可能会有所帮助:如何在opera文本框上的所需索引中设置焦点