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

Question

我正在使用

来自萤火虫

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 helper生成：

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