Question

我已经在一个项目上工作了一段时间，事情进展顺利，但后来我意识到我的代码在IE中根本不起作用。我正在尝试解决一些主要问题，并放弃一些事情，但有一件事我似乎无法在IE中工作。（跟我一起来;这是一个学校项目。）

我的计划是在页面中央对齐5个图像按钮/链接。我已将每个链接变为带背景图像的链接，因为我想添加悬停效果...

这是我的菜单代码：

<a href="profile.html" id="profilebtn"><br><br><br><p>Profile</p></a>
<a href="projects.html" id="projectsbtn"><br><br><br><p>Projects</p></a>
<a href="gallery.html" id="gallerybtn"><br><br><br><p>Gallery</p></a>
<a href="blog.html" id="blogbtn"><br><br><br><p>Blog</p></a>
<a href="contacts.html" id="contactsbtn"><br><br><br><p>contacts</p></a>

这是我的css，适用于FireFox和Chrome（以及Safari）：

#profilebtn, #projectsbtn, #blogbtn, #gallerybtn, #contactsbtn {
    font-family: 'courier New', monospaced;
    font-size: 25px;
}
#profilebtn {
    background-image: url(images/Profilebutton.png);
    width: 143px;
    height: 143px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 670px;
    text-align: right;
}
#profilebtn:hover {
    background-image: url(images/profilehover.png);
}
#projectsbtn {
    background-image: url(images/projectsbutton.png);
    width: 143px;
    height: 143px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 335px;
    text-align: right;
}
#projectsbtn:hover {
    background-image: url(images/projectshover.png);
}
#gallerybtn {
    background-image: url(images/gallerybutton.png);
    width: 143px;
    height: 143px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
#gallerybtn:hover {
    background-image: url(images/galleryhover.png);
}
#blogbtn {
    background-image: url(images/blogbutton.png);
    width: 143px;
    height: 143px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 335px;
    right: 0;
    text-align: left;
}
#blogbtn:hover {
    background-image: url(images/bloghover.png);
}
#contactsbtn {
    background-image: url(images/contactsbutton.png);
    width: 143px;
    height: 143px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 670px;
    right: 0;
    text-align: left;
}
#contactsbtn:hover {
    background-image: url(images/contactshover.png);
}

这是链接here。

Answer 1

在我的测试中，它适用于IE8及以上版本。微软不再支持IE7了，所以你不应该担心它，但如果你的老师会使用IE7，这并不能解决你的问题。

更简单的解决方案可能是打开photoshop并将文本放入图像中。然后你可以做这样的事情：

<p><a href="profile.html" id="profile-button" class="button"><span class="button-text">Profile</span></a></p>

在你的CSS中：

.button {
    width: 143px;
    height: 143px;
    position: absolute;
}

.button-text {
    display: none;
}

#profile-button {
    background-image: url("images/Profilebutton.png");
    left: 0;
    right: 670px;
}

这应该很好地降低，并且也避免了对所有<br>标记的需要。

无法居中主菜单链接IE

1 个答案: