Question

带有img的{{1}}会将滚动条应用于Web浏览器。

如果没有height: 100%标签，则没有滚动条。插入<!DOCTYPE>标签时，将创建一个滚动条。

我尝试了几件事，但是我认为<!DOCTYPE>是个问题

我想使滚动条消失而不使用<!DOCTYPE>。

overflow

上面的源代码没有滚动条，但是插入<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } img { width: 100%; height: 100%; } </style> </head> <body> <img src="test.jpg"> </body> </html>会创建一个滚动条。

我已使用开发人员工具来确保<!doctype html>，html和body的高度相同。

我想知道为什么img导致滚动条。而且我想知道如何在不使用CSS中使用<!doctype html>的情况下进行修复。

我尝试了几种代码：

Answer 1

将display: block添加到<img>。

默认情况下，<img>具有display: inline作为默认显示样式。 inline和inline-block的显示样式将在元素之间应用空格。

要删除空格，您可以阅读以下链接：

或者，只需将其显示样式设置为display: block。

之前

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Sig07-006.jpg">

之后：

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  
  /* ADD THIS */
  display: block;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Sig07-006.jpg">

关于声明<!DOCTYPE html>影响布局的原因，您可以阅读this MDN doc。

基本上，如果没有<!DOCTYPE html>，浏览器将以较旧的呈现方式呈现页面，以支持较旧的网页。

img高度100％滚动条

1 个答案: