Question

我正在努力使页面导航尽可能便携。我正在使用Chrome 58并且页面按预期显示：iframe根据td容器调整大小，但在IE和firefox中不起作用，它在单元格中间显示iframe。这是我的代码。

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="language" content="ES">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css.css" type="text/css" rel="stylesheet">
        <script src="js.js" type="text/javascript" charset="UTF-8"></script>
        <title>Mi sitio</title>
    </head>
    <body>
        <table id="navUI">
            <tr>
                <td id="navHeader" colspan="2">Tema general</td>
            </tr>
            <tr>
                <td id="MenuHeader">Men&uacute;</td>
                <td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td>
            </tr>
            <tr>
                <td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>     
            </tr>
            <tr>
                <td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td>
            </tr>
            <tr>
                <td class="spander">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

CSS：

@charset "utf-8";

html, body, table {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}

body {
    font:12px Verdana, Arial, Sans-serif;
}

table#navUI, td {
    border:1px solid black;
}

td#navHeader {
    text-align:center;
    height:30px;
}

td#MenuHeader {
    width:10%;
    text-align:center;
}

td.MenuItems {
    width:10%;
}

td.MenuItems:hover {
    background-color:#BDBEE1;
    cursor:pointer;
}

td.spander {
    width:10%;
    height:100%;
}

#navField {
    border:none;
    height:100%;
    width:100%;
}

这个想法是保持纯html和css没有jquery。谢谢你的帮助。

Answer 1

将此添加到包含td的<{1}}：

iframe

这是一个适用于Firefox的小提琴：

https://jsfiddle.net/3urm8kx8/1/

div容器上的iframe在IE8 / firefox45.9上没有按预期工作

1 个答案: