css - 为什么我的图像高度在 Firefox 中首次加载时设置错误？

Question

我在用

来自 Firebug

element {
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: 5;
opacity: 1;
width: 300px;
height: 18px;
 }

来自 Google 控制台:

  element.style {
 position: absolute;
 top: 0px;
 left: 0px;
 display: none;
 z-index: 4;
 opacity: 0;
 width: 300px;
 height: 260px;
 }

问题截图如下:

这是由 Rails 助手生成的代码:

    <img alt="Home_page_4" height="260" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" width="300" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; ">

谁能告诉我我做错了什么？

Answer 1

请始终指定尺寸，而不是 "260"和 "300"使用 "260px"和 "300px" . 和 0必须在没有 px 的情况下指定值方面。另外请关闭<img/>像这样的标签:

<img alt="Home_page_4" height="260px" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" width="300px" style="position: absolute; top: 0; left: 0; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; " />

实际上，您不必使用 width和 height属性，它们已被弃用。所以这个标记应该可以正常工作:

<img alt="Home_page_4" src="http://127.0.0.1:3000/assets/home_page_4.jpeg" style="position: absolute; top: 0; left: 0; display: none; z-index: 4; opacity: 0; width: 300px; height: 260px; " />