Question

渲染以下内容时，不考虑图像（img）的高度参数。但是，如果我以百分比（例如80％）改变宽度，则会调整大小并调整宽高比。如果我提到px的高度它是有效的。问题仅出现在高度为％和所有浏览器中。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" /> 
</body>
</html>

如果我们从doctype中删除“http://www.w3.org/TR/html4/loose.dtd”，如下所示，％适用于高度，但在IE中不会考虑任何给予图片的填充，但在其他浏览器中效果不错。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" /> 
</body>
</html>

我尝试过使用YUI 3 api进行CSS重置。虽然它删除了浏览器的所有默认填充，但它不会解决我的问题。有可用的解决方法吗？感谢。

Answer 1

将以下CSS添加到我的CSS文件中就可以了。

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

谢谢我：D

HTML中百分比问题的高度

1 个答案: