html - Internet Explorer 屏幕中的可链接部分失败-6ren

html - Internet Explorer 屏幕中的可链接部分失败

转载作者：太空宇宙更新时间：2023-11-04 15:06:50

25

4

我必须将图像在两个轴上居中，然后将可链接区域添加到该图像的左上角区域。这对 webkit 和 ff 非常有用，但 ie 失败了。我的 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 不起作用，因为我使用了一个标签，该标签显示为相应定位的内联 block 。我们的 friend ie 根本不在屏幕上显示可链接的部分，因为文本缩进。有人可以帮忙吗？谢谢。这demo我认为会帮助你更多。

最佳答案

看看this demo (或仅结果 here )

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;
}

关于html - Internet Explorer 屏幕中的可链接部分失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15808771/

25

4

0

文章推荐： c++ - 如何获取 `std::basic_string`进行编译？

文章推荐： java - 导入 java.net.URLEncoder 时 NetBeans 7.4 找不到符号错误

文章推荐： java - java中读取RTF文件时如何设置格式？

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - Internet Explorer 屏幕中的可链接部分失败