图像在不同屏幕上显示不同

Question

我有一个使用此代码放置的固定图像：

<a href="http://website.com" onMouseOver='img_mo5.src="style/images/download-btn-hover.png"' onMouseOut='img_mo5.src="style/images/download-btn.png"'><img style="position: fixed; bottom: 0; right: 865px; height: 58%;z-index: 0;" src="style/images/download-btn.png" name="img_mo5" alt="" width="450px" height="300px"></a>

问题在于，在更大的屏幕中，图像被放置在屏幕中间而不是左下角（在 15 英寸屏幕上可以正常工作）

如何在 HTML 中使用 inline-css style= (attribute) 代码解决此问题？

Answer 1

好的，你说没有 CSS，但你的代码中有内联 CSS。

第二，你为什么用position: fixed with right: 865px？

图像出现在大屏幕中间的原因是您指定了直接像素值。你会想要改变

right: 865px;

到

left: 0;

或者将链接改为向左浮动，如：

float: left;

不管怎样，你为什么要把 CSS 内联？这不是 CSS 的推荐或正确用法。 CSS 旨在将内容与样式分开，因此将其内联违背了目的。

Answer 2

如果您希望它位于屏幕的左角，您应该使用 left:0 而不是 right:865px

<a href="http://website.com" onMouseOver='img_mo5.src="style/images/download-btn-hover.png"' onMouseOut='img_mo5.src="style/images/download-btn.png"'><img style="position: fixed; bottom: 0; left: 0; height: 58%;z-index: 0;" src="style/images/download-btn.png" name="img_mo5" alt="" width="450px" height="300px"></a>

如果您提供 jsfiddle，我可以为您提供更多帮助。

编辑：

关于像你问我这样的移动网站，大多数移动浏览器都不能很好地支持它，所以我们使用 JavaScript 来完成这项工作，这里有一堆示例和更多信息http://bradfrostweb.com/blog/mobile/fixed-position/