CSS样式未完全应用

huangapple
go评论101阅读模式
英文:

CSS Style not being applied completely

问题

我正在尝试通过使用 right : -80px; 来裁剪嵌套在 iframe 中的网站的右侧。一切似乎都正常，但右侧的裁剪没有生效。

我已经尝试过：

  • 将 right 和 left 更改为 margin-right 和 margin-left
  • 通过按 Ctrl+F5 来执行“完全刷新”浏览器
  • 尝试将值从 -80px 更改为不同的值，以查看是否有效
  • 使用 Edge 和 Firefox 进行测试
英文:

I am trying to crop the right side of the embedded website within the iframe with right : -80px;. Everything seems to work but the cropping of the right side.

  1. <html lang="en">
  2. <body>
  4. <style>
  5.  #div-id{
  6.     border   : 2px solid blue;
  7.     width    : 600px;
  8.     height   : 800px;
  9.     position : relative;
  10.     overflow : hidden;
  11. }
  12.  #iframe-id{
  13.     position : absolute;
  14.     top      : -160px;
  15.     right    : -80px;
  16.     left     : -25px;
  17.     width    : 620px;
  18.     height   : 450vh;
  19. }
  20. </style>
  21. <div id="div-id">
  22.  <iframe title="example" src="https://example.org" id="iframe-id" scrolling="yes"></iframe>
  23. </div>
  25. </body>
  26. </html>

I've tried to:

  • change the right and left to margin-right and margin-left
  • "Full"-refreshed the browser via ctrl+F5
  • Changed the value from -80px to many different things to see if it is working at all
  • Used Edge and Firefox for testing

答案1

得分: 0

只拿走权利，因为你想向左走。

  1. <style>
  2.   * {
  3.     margin:0;
  4.     padding:0;
  5.   }
  7.   body,html {
  8.     overflow:hidden;
  9.   }
  10.  #div-id{
  11.     border: 2px solid rgb(255, 0, 0);
  12.     width: 40%;
  13.     height: 85%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  18.  #iframe-id{
  19.     position: absolute;
  20.     top: -160px;
  21.     left: -80px;
  22.     width: 620px;
  23.     height: 450vh;
  24. }
  25. </style>
  26. <div id="div-id">
  27.  <iframe title="example" src="https://example.org" id="iframe-id" scrolling="yes"></iframe>
  28. </div>
  30. </body>
  31. </html>
英文:

Just take away the right because you want to go left.
<html lang="en">
<body>

  1. &lt;style&gt;
  2.   * {
  3.     margin:0;
  4.     padding:0;
  5.   }
  7.   body,html {
  8.     overflow:hidden;
  9.   }
  10.  #div-id{
  11.     border: 2px solid rgb(255, 0, 0);
  12.     width: 40%;
  13.     height: 85%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  18.  #iframe-id{
  19.     position: absolute;
  20.     top: -160px;
  21.     left: -80px;
  22.     width: 620px;
  23.     height: 450vh;
  24. }
  25. &lt;/style&gt;
  26. &lt;div id=&quot;div-id&quot;&gt;
  27.  &lt;iframe title=&quot;example&quot; src=&quot;https://example.org&quot; id=&quot;iframe-id&quot; scrolling=&quot;yes&quot;&gt;&lt;/iframe&gt;
  28. &lt;/div&gt;
  30. &lt;/body&gt;
  31. &lt;/html&gt;

huangapple
  • 本文由 发表于 2023年7月13日 22:05:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/76680292.html
  • crop
  • css
  • html
  • iframe
  • margin
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定