Question

我创建了一个简单的例子来说明我遇到的问题。

似乎如果我将DIV设置为特定像素宽度，则将浏览器调整为较小，直到出现水平滚动条然后向右滚动，内容将被切断。或者至少其中一些。

http://www.artworknotavailable.com/examples/cutoff.html

我错过了吗？什么东西在这里？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Browser Cutoff Example</title>
    </head>

    <body>

    <div>
      <div style="background-color:#009900;">
        <div style="width:800px;">
          <strong>Width: 800px </strong>

          <br />
          Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
          <br />
          Now scroll to the right. 
          <br />
          Why is the box getting cut off?
        </div>
      </div>
    </div>


    </body>

    </html>

Answer 1

这个问题也让我感到疯狂，而且这个问题在解决方面非常简单。只需添加属性min-width并将相同的值设置为您的网站宽度（800px，960px，..）

Answer 2

你有3个嵌套的div。一个没有风格。下一个有背景颜色。他最深的是宽度为800px。

尝试这个，你会看到发生了什么：

<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Browser Cutoff Example</title>
</head><body>

<div>
    <div style="background-color: rgb(0, 153, 0); border: 9px solid blue;">
    <div style="width: 800px; border: 1px solid red;">
        <strong>Width: 800px </strong>
        <br>
        Resize your browser Smaller than the width of this box until Horizontal scroll bars appear
      <br>
      Now scroll to the right. 
      <br>
      Why is the box getting cut off?
    </div>
  </div>
</div>


</body></html>

浏览器滚动会切断内容

2 个答案: