為什么我的圖像在IE11中的高度很小？

Question

我僅使用html和css將圖像定位在表中時遇到問題。

的CSS

#mytable {
    border-radius: 3px;
    height: 340px;
    font-family: Calibri;
}

#myText {
    width: 320px;
    height: 235px;
    padding-right: 14px;
    padding-left: 14px;
    background-color: rgb(241, 241, 241);
}

#myimage {
    border-radius: 3px;
    height: 300px;
    position: relative;
    min-width: 180px;
}

#mycontainer {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    right: 0px;
    bottom: 0px;
    position: absolute;
}

#secondContainer {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

#divTable {
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    opacity: 1;
    background-color: rgb(243, 242, 237);
}

的HTML

<div class="main">
    <table width="100%" id="mytable">
        <tbody>
            <tr>
                <td id="myText" valign="top">
                    <div style="overflow: hidden; max-height: 340px;">
                        <span id="textcontent">
                            <h4>My text content</h4>
                            <span style="float: right;">Sample</span>Text<br>Here
                        </span><br>
                    </div>
                </td>

                <td id="myimage">
                    <div id="mycontainer">

                        <div id="secondContainer">
                            <div id="divtable" tabindex="-1" class="ms-composite" dir="ltr">
                                <img src="https://www.w3schools.com/html/pic_trulli.jpg" style="position:relative" alt="Trulli" width="500" height="333">
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

例如，這是firefox中的結果：

IE中的相同代碼：

我認為這與絕對立場有關。

請幫忙！

Answer 1

這與overflow:hidden; ，IE11認為圖像的高度溢出，因此他正在隱藏圖像。 你的解決方法是刪除height:100%或overflow:hidden從secondContainer，它會在bouth瀏覽器。

  #mytable { border-radius: 3px; height: 340px; font-family: Calibri; } #myText { width: 320px; height: 235px; padding-right: 14px; padding-left: 14px; background-color: rgb(241, 241, 241); } #myimage { border-radius: 3px; height: 300px; position: relative; min-width: 180px; } #mycontainer { left: 0px; top: 0px; width: 100%; height: 100%; right: 0px; bottom: 0px; position: absolute; } #secondContainer { left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; } #divTable{ left: 0px; top: 0px; position: absolute; z-index: 0; opacity: 1; background-color: rgb(243, 242, 237); }

 <div class="main"> <table width="100%" id="mytable"> <tbody><tr> <td id="myText" valign="top" > <div style="overflow: hidden; max-height: 340px;"> <span id="textcontent"><h4>My text content</h4> <span style="float: right;">Sample</span>Text<br>Here</span><br> </div> </td> <td id="myimage"> <div id="mycontainer"> <div id="secondContainer" > <div id="divtable" tabindex="-1" class="ms-composite" dir="ltr"> <img src="https://www.w3schools.com/html/pic_trulli.jpg" style="position:relative" alt="Trulli" width="500" height="333"> </div> </div> </div> </td> </tr> </tbody></table> </div>

Answer 2

只需從#mycontainer中刪除position:absolute屬性即可。

還有一個建議：使用有很多不需要的CSS刪除那些CSS。

 <!DOCTYPE html> <html> <style> #mytable { border-radius: 3px; height: 340px; font-family: Calibri; } #myText { width: 320px; height: 235px; padding-right: 14px; padding-left: 14px; background-color: rgb(241, 241, 241); } #myimage { border-radius: 3px; height: 300px; position: relative; min-width: 180px; } #mycontainer { left: 0px; top: 0px; width: 100%; height: 100%; right: 0px; bottom: 0px; } #secondContainer { left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; position: absolute; } #divTable { left: 0px; top: 0px; position: absolute; z-index: 0; opacity: 1; background-color: rgb(243, 242, 237); } </style> <body> <div class="main"> <table width="100%" id="mytable"> <tbody> <tr> <td id="myText" valign="top"> <div style="overflow: hidden; max-height: 340px;"> <span id="textcontent"><h4>My text content</h4> <span style="float: right;">Sample</span>Text<br>Here</span><br> </div> </td> <td id="myimage"> <div id="mycontainer"> <div id="secondContainer"> <div id="divtable" tabindex="-1" class="ms-composite" dir="ltr"> <img src="https://www.w3schools.com/html/pic_trulli.jpg" style="position:relative" alt="Trulli" width="500" height="333"> </div> </div> </div> </td> </tr> </tbody> </table> </div> </body> </html>

為什么我的圖像在IE11中的高度很小？

問題描述

2 個解決方案

解決方案1
4 已采納 2019-09-06 18:24:34

解決方案2
0 2019-09-06 18:19:21

為什么我的圖像在IE11中的高度很小？

問題描述

2 個解決方案

解決方案1 4 已采納 2019-09-06 18:24:34

解決方案2 0 2019-09-06 18:19:21

解決方案1
4 已采納 2019-09-06 18:24:34

解決方案2
0 2019-09-06 18:19:21