Question

我有弹出式叠加，这可能会阻止下面的文字选择。但是在IE中，如果我选择弹出文本，叠加下的文本也会被选中。怎么解决？弹出文本应该是可选择的。

Here 是图片的样子。

这是html代码：

<body style="margin: 0;
             padding: 0;
             text-align: center;">
    <div class="topfixed" style="height: 200px;
                                 top: 0px;
                                 left: 0px;
                                 right: 0px;
                                 position: fixed;
                                 z-index: 0;
                                 background-color: red;">
        <div>Header</div>
        <div>Header</div>
    </div>
    <div class="content" style="margin-top: 200px;
                                position: relative;
                                z-index: 1;
                                background-color: blue;">
        <div>Content</div>
        <div>Content</div>
    </div>
    <div class="overlay" style="top: 0px;
                                bottom: 0px;
                                left: 0px;
                                right: 0px;
                                position: fixed;
                                z-index: 10;
                                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAwMzBFQkFGOTM3MDExRTFBOUNCQ0YzQzcwMzE5Qzk3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAwMzBFQkIwOTM3MDExRTFBOUNCQ0YzQzcwMzE5Qzk3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDAzMEVCQUQ5MzcwMTFFMUE5Q0JDRjNDNzAzMTlDOTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDAzMEVCQUU5MzcwMTFFMUE5Q0JDRjNDNzAzMTlDOTciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uy1cvAAAApklEQVR42uzRAQ0AAAjDsIMy/KvCBiGdhLWSTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrcCDAD6kAEI03atVgAAAABJRU5ErkJggg==');">
    </div>
    <div class="popup" style="top: 0px;
                              bottom: 0px;
                              left: 0px;
                              right: 0px;
                              position: fixed;
                              z-index: 15;
                              color: white;
                              font-size: 48px;">
        <div>Popup Text</div>
    </div>
</body>

Answer 1

将body css样式设为

overflow:auto;

看我已经更新了你的小提琴 https://jsfiddle.net/jtjojgzh/

IE如何防止叠加

1 个答案: