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/

图像在不同的屏幕中显示不同

2 个答案: