0

我必须在两个轴上集中图像，然后将可链接区域添加到该图像的左上角区域。这对 webkit 和 ff 非常有效，但失败了。我的html代码是这样的：

<body>
<div class="content">
    <img src="images/main_image.jpg" />
    <a href="#somelinkhere">Logo</a>
</div>
</body>

我的CSS代码是这样的：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}
div.content {
    position: relative;
    width: 1001px; 
    height: 626px;
    top: 50%;
    margin: 0 auto;
    padding: 0;
}
div.content img {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    top: -50%;
}
div.content a {
    width: 14%;
    height: 9%;
    display: inline-block;
    position: absolute;
    top: -42%;
    left: 7%;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
}

这对 ie 不起作用，因为我使用显示为相应定位的内联块的 a 标记。我们的朋友 ie 根本没有在屏幕上显示可链接部分，因为文本缩进。有人可以帮忙吗？谢谢。我认为这个演示会帮助你更多。

4

2 回答 2

1

看看这个演示（或结果只在这里）

HTML 没有改变。我假设图像具有与内容 div 相同的高度/宽度

CSS：

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    overflow: hidden;
}
div.content {
    position: relative;
    padding: 0;
    border:solid 1px blue;
    width: 1001px; 
    height: 626px;
    /*below will center div on screen */
    top: 50%;    
    margin: -313px auto 0;

}
div.content img {
    margin: 0;
    padding: 0;
    display: block;    
    border:solid 1px white;
   /*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {        
    width: 14%;
    height: 9%;    
    position: absolute;
    /* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
    top: 10%;
    left: 7%;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    border:solid 1px green;
}
于 2013-04-04T12:05:36.067 回答
0

看起来就像您正在创建一个容器，将其移动到屏幕底部，然后将其外部的图像移动到屏幕的左上角。这最后一步正是在许多情况下会失败的地方。离开父容器时，子元素通常会被隐藏或切除。在这种情况下，IE 更具限制性但正确。

当您将图像放在容器外时，您可以更轻松地实现目标。请记住，body 本身就是一个容器，它总是 100% 宽和高（不能更改为 50% 或任何值）。

这是js-fiddle上的结果

的HTML：

<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">   
    This is the container
    <a href="#" >Logo</a>
</div>
</body>

CSS：

body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px; 
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
    color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}

一般来说，最好避免负值。它们在许多浏览器中被误解并产生问题。

于 2013-04-04T11:19:33.810 回答