使用弹性框的居中按钮在 IE 中不起作用 [重复]

Posted 2023-03-06

【中文标题】使用弹性框的居中按钮在 IE 中不起作用 [重复]

【英文标题】：Centering button using flex box not working in IE [duplicate]

【发布时间】：2017-11-18 07:50:51

【问题描述】：

您好我已经参考了这个问题并尝试了它的答案Flexbox Not Centering Vertically in IE

但是我的按钮仍然不会在 IE 中居中，它适用于所有其他浏览器。

这里是 html

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="img here"/>
        <button class="play" data-video="video url here"></button>
    </div>
    <div class="caption">
        <h3 class="caption__subhead">Caption Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

还有我的少

.captioned-video 
    border: 1px solid @light-slate;
    padding: 20px;
    display: flex;
    flex-direction: column;

.video-container 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;

    img 
        flex: none;
    

    iframe /*iframe is here because on btn click the img is swapped to this*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    

    .play 
        width: 100px;
        height: 100px;
        border-radius: 100%;
        border: none;
        background-color: rgba(200, 81, 8, 0.8);
        position: absolute;
        padding: 0;
        &:hover 
            transition: all ease 0.5s;
            background-color: rgba(200, 81, 8, 1);
        
        &:after 
            content: "";
            position: relative;
            display: inline-block;
            border-style: solid;
            border-width: 20px 0 20px 30px;
            border-color: transparent transparent transparent white;
            top: 2px;
            left: 5px
        
    


.caption 
    .caption__subhead 
        color: @royal-blue;
        font-family: @headings-font-family;
        font-size: 14px;
    

    p 
        font-size: 12px;
        font-style: @font-family-sans-serif;
    

如果我在 ie ii 中检查按钮上的元素不可见但元素突出显示它似乎在图像下方，我错过了什么，可能是定位问题？

【问题讨论】：

为了更好的帮助，发布编译后的代码，这样更容易重现问题。不是每个人都使用 CSS 预处理器。

你说的是哪个版本的IE？ IE9 及以下不支持 flexbox。 IE 10 及更高版本支持有限版本的 flexbox。

@Terry IE11，我需要一个快速修复，所以我只做了 top / bottom / left / right : 0 和 margin auto 但我想知道为什么 flexbox 不能在那里工作。

欺骗链接建议 Safari，尽管它与我下面的 wiki 答案中的解决方案相同。

【参考方案1】：

由于您在 button 上设置了 position: absolute，IE（很可能是 Safari）不会像其他浏览器那样将其居中。

要修复它，请像这样更新您的 .play 规则

.play 
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: none;
    background-color: rgba(200, 81, 8, 0.8);
    position: absolute;
    top: 50%;                                /* added */
    left: 50%;                               /* added */
    transform: translate(-50%,-50%);         /* added */
    ...

Updated codepen

堆栈sn-p

.captioned-video 
  border: 1px solid red;
  padding: 20px;
  display: flex;
  flex-direction: column;

.captioned-video .video-container 
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;

.captioned-video .video-container img 
  flex: none;

.captioned-video .video-container iframe 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

.captioned-video .video-container .play 
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: none;
  background-color: rgba(200, 81, 8, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;

.captioned-video .video-container .play:hover 
  transition: all ease 0.5s;
  background-color: #c85108;

.captioned-video .video-container .play:after 
  content: "";
  position: relative;
  display: inline-block;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent white;
  top: 2px;
  left: 5px;

.captioned-video .caption .caption__subhead 
  color: blue;
  font-family: Arial;
  font-size: 14px;

.captioned-video .caption p 
  font-size: 12px;
  font-style: Arial;

<div class="captioned-video">
    <div class="video-container" data-module-dynamic="embed-video">
        <img src="http://placehold.it/300/f99"/>
        <button class="play" data-video="video url here"></button>
    </div>
    <div class="caption">
        <h3 class="caption__subhead">Caption Headline</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
</div>

---

原因在这里解释得很好：

How to center absolutely positioned children of a flex container in Safari?

【讨论】：

感谢您的解释，我刚刚使您的解决方案有效，并且对翻译进行了更多调整，这就是解决方案，感谢您提供解释该问题的其他材料。