iframe左、下、右侧边框显示异常：大屏小屏表现不一致求助

问题描述 #

我希望为iframe添加左侧、底部和右侧的蓝色边框，但显示存在异常：大屏设备上仅能显示左侧和底部边框，小屏设备上仅显示左侧边框。页面背景为黄色，问题出在主index.html文件中。此前尝试过将百分比单位改为vh、调整百分比数值等操作，但问题仍未解决。

问题原因 #

• iframe设置了width:209vh，该宽度远大于视口宽度，导致右侧边框被挤出屏幕无法显示
• 未使用box-sizing: border-box，边框宽度会额外增加元素总宽高，进一步导致元素超出容器范围
• iframe默认是行内块元素，存在额外间距影响布局

修复方案 #

修改iframe样式并调整全局盒模型设置，确保边框包含在元素尺寸内：

修复后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "Iframe/Resource/DTD/loose.dtd">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Multi-Ware</title>
  <link href="Iframe/Resource/Style/style.css" rel="stylesheet" type="text/css" />
  <script src="Iframe/Resource/Script/971e3befae.js" crossorigin="anonymous"></script>
  <script src="Iframe/Resoruce/Script/jquery-3.6.0.min.js" type="text/javascript"></script>
<link rel="manifest" href="manifest.json" />
<!-- ios support -->
<link rel="apple-touch-icon" href="Iframe/Resource/Image/Icon.png" />

 
  <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> -->
  <link rel="icon" type="image/x-icon" href="Iframe/Resource/Image/favicon.ico">
  <style type="text/css">
    * {
      box-sizing: border-box; /* 全局盒模型设置，边框和内边距计入元素尺寸 */
    }
    #Close-Button {border: 1px solid black; background-color: #d4d0c7; color: black; text-decoration: none; font-size: 18px;}
    #Close-Button:hover {color: #ffffff; background-color: #ff030b;}
    #Close-Button:visited {color: black;}
    html, body {margin: 0; padding: 0; height: 100%; overflow: hidden;}
    .main-iframe {
      display: block; /* 消除行内元素默认间距 */
      width: 100%;
      height: calc(100% - 40px); /* 减去顶部标题栏高度，可根据实际情况调整数值 */
      border-left:5px solid #0b2370;
      border-bottom:5px solid #0b2370;
      border-right:5px solid #0b2370;
      border-top: none;
      z-index:999998;
    }
  </style>
</head>
<!-- change bgcolor to #0b2370 after you are done working with the frame -->
<body bgcolor="yellow">
  <font face="monospace" color="white">
    <b><font size="+2"><img src="Iframe/Resource/Image/Icon.png" style="height: 19.3125px; width: 17.3125px; padding-left: 5px; padding-top: 5px;"> Multi-Ware</font></b> <span style="float: right;"> <button onclick="toggleFullScreen()" title="Full-Screen/Exit Full-Screen Mode" id="fullScreenExitFullScreenButton"> <i class="fa-solid fa-expand"></i> </button> <a href="#" onclick="Javascript: top.close();" id="Close-Button" title="Close"> X </a> </span>
    <br />
    <iframe frameborder="0" class="main-iframe" src="Iframe/Home.html" name="Main-Iframe"></iframe>
    <div id="contextMenu" class="context-menu" style="display: none; z-index: 999999;">
    <ul>
        <li><a href="Iframe/Help/Help.html" class="Drop-Down-Menu-Link" target="_blank" rel="noopener noreferrer">Help</a></li>
        <li><a href="Iframe/About.html" class="Drop-Down-Menu-Link" target="Main-Iframe">About</a></li>
        <li><a href="Iframe/Share.html" class="Drop-Down-Menu-Link" target="Main-Iframe">Share</a></li>
        <li><a href="Iframe/Feedback.html" class="Drop-Down-Menu-Link" target="Main-Iframe">Feedback</a></li>
        <li><a href="#" onclick="Javascript: top.close();" class="Drop-Down-Menu-Link">Close</a></li>
        
    </ul>
    </div>
  </font>
  

  
  
  
  <script src="Iframe/Resource/Script/script.js" type="text/javascript"></script>
  <script type="text/javascript">
   if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker
      .register("/serviceWorker.js")
      .then(res => console.log("service worker registered"))
      .catch(err => console.log("service worker not registered", err))
  })
}
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {
      document.documentElement.requestFullScreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullScreen) {
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    }
  }
}

  </script>
  
  
</body>
  

</html>

关键修改说明 #

• 全局设置box-sizing: border-box，让所有元素的边框、内边距都包含在设定的宽高内，避免尺寸溢出
• 将iframe宽度改为100%，确保在任何屏幕尺寸下都不会超出视口范围
• 使用calc(100% - 40px)设置iframe高度，减去顶部标题栏的高度，保证底部边框完整显示
• 添加display: block消除iframe默认的行内元素间距，避免布局错位

内容的提问来源于stack exchange，提问作者Rahith Ahsan