Question

IE中左右定位的任何解决方法？似乎在Chrome中找到了所有内容但是当我尝试在IE上运行我的页面时，我发现顶部和左侧的定位在IE中不起作用。

这是我到目前为止所拥有的。

<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible bg-black p-r-35 animated fadeInDown" role="alert" data-notify-position="top-center" style="display: inline-block; margin: 0px auto; position: fixed; transition: all 0.5s ease-in-out; z-index: 1031; top: 20px; left: 0px; right: 0px;">
                <span data-notify="icon"></span>
                <span data-notify="title"></span>
                <span data-notify="message">SAMPLE NAME HERE</span>
                <a href="#" target="_blank" data-notify="url"></a>
            </div>

Here is a fiddle for my complete codes.

Answer 1

问题似乎是left: 0px; right: 0px;。它似乎应该同时在两个地方，所以IE很困惑，据说打破了。你有没有理由这样做？

Answer 2

添加此样式将起作用

或此处的一个演示http://codepen.io/Bhupinderkumar/pen/ZerVyw

<div data-notify="container align-center" class="bootstrap-notify-container alert alert-dismissible bg-black p-r-35 animated fadeInDown" role="alert" data-notify-position="top-center" style="display: flex;justify-content:center; margin: 0px auto; transition: all 0.5s ease-in-out; z-index: >
                <span data-notify="icon"></span>
                <span data-notify="title"></span>
                <span data-notify="message">SAMPLE NAME HERE</span>
                <a href="#" target="_blank" data-notify="url"></a>
            </div>

如果你需要固定位置，你可以使用这个：

<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible bg-black p-r-35 animated fadeInDown" role="alert" data-notify-position="top-center" style="display: inline-block; margin: 0px auto; position: fixed; transition: all 0.5s ease-in-out; z-index: 1031; top: 20px; left: 0px; right: 0px;position:fixed;">
                <span data-notify="icon"></span>
                <span data-notify="title"></span>
                <span data-notify="message">SAMPLE NAME HERE</span>
                <a href="#" target="_blank" data-notify="url"></a>
            </div>

Answer 3

可能有帮助！

<div data-notify="container" class="bootstrap-notify-container 
 alert alert-dismissible bg-black p-r-35 animated fadeInDown" 
 role="alert" data-notify-position="top-center" 
 style="display: inline-block; margin: 0px auto; 
 position: fixed; transition: all 0.5s ease-in-out; 
 z-index: 1031; top: 20px; left:00px; right: 0px;
 margin-right:50px; margin-left:50px;">
                <span data-notify="icon"></span>
                <span data-notify="title"></span>
                <span data-notify="message">SAMPLE NAME HERE</span>
                <a href="#" target="_blank" data-notify="url"></a>
            </div>

CSS Top和Left位置在IE中不起作用

3 个答案:

添加此样式将起作用