css - 固定位置按钮出现在不正确的区域，具体取决于浏览器

Question

我正在尝试制作一个简单的 html 网站：

http://www.williamcharlesriding.com/test/index3.html

问题是按钮，它们是png的，我试图定位在背景图像的各个区域，使用这样的css：

.but1 {
    opacity:0;
    filter:alpha(opacity=0);
    position:fixed;
    top:463px;
    left:36px;
}

但是我注意到在不同的浏览器中，根据缩放系数，按钮可能会偏离预期的标记。对此的任何建议将不胜感激，谢谢

Answer 1

Set your .content container to position: relative and change each button div from position: fixed to position: absolute. The relative position on the container will make the absolute position relative to your div, rather than the browser.

.content {
    padding: 10px 0;
    background-color: #5a5958;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

I would probably add another class to each, so you could do something like this:

<div class="but but1">
<div class="but but2">

.but { position: absolute; }
.but1 { top: 463px; left: 36px; }

Answer 2

Normalize.css可能会有所帮助，它包含所有浏览器的默认 CSS。确保在你的主要 CSS 之前包含它。抱歉，正如另一个答案所述，问题是您相对于浏览器窗口定位，而不是父元素。