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

Question

我正在使用

来自萤火虫

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

从谷歌控制台：

  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"and "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; " />