【发布时间】：2011-06-23 07:15:36
【问题描述】：
我正在改造我的网站，并遇到了两个问题，如果可能的话，我希望得到帮助。
测试站点的链接是http://elovideo.com/test/index.html
1) 我正在添加带有海报的嵌入视频，以便在页面加载时不会下载。当我在 Firefox 中查看页面并单击电影时，悬停仍然适用于我的其他超链接。我的链接亮起，出现下划线或可见手，都表明可以选择这些项目。
但是在 Safari 中，一旦选择了视频，我的悬停就不起作用。我仍然可以点击这些链接，但是对于我网站的新手来说，他们不会意识到某些文本是超链接。在选择视频进行查看/加载之前，悬停效果很好。
2) 在 Firefox 中播放电影时，我的视频查看器周围会出现一个虚线框。我希望能够阻止这种情况发生。它不会在 Safari 中发生。
我很确定错误在于用户错误，因为我在编写代码方面并不熟练。任何帮助将不胜感激。如果我做错了什么，请告诉我。
谢谢！ 埃里卡
样式表 CSS 代码如下 - HTML 可以在上面列出的网站源中查看。
html, body , ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: 0;
}
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.more {
text-align: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
body, h1, h2, h3, form {
font: 14px tahoma, arial, sans-serif;
margin: 0;
padding: 0;
color: #7a895d; repeat-x;
}
body {
background: #7a895d url(images/headerback.jpg) repeat-x;
text-align: left;
}
#bodyinner {
background: url(images/white.jpg) repeat-y;
width: 960px;
margin: 0;
padding: 10px 30px 20px 10px;
z-index: 2;
}
#wrapper {
text-align: left;
margin: auto;
width: 1000px;
background: #7a895d ;
}
#header {
height: 100px;
position: absolute;
}
#header h1 {
margin-top: 0px;
}
#header h1 img {
display: block;
}
#bnav {
margin-top: 0px;
margin-left: 200px;
}
#bnav img {
float: left;
}
#nav {
margin-top: -80px;
margin-left: 200px;
}
#nav img {
float: left;
}
#headline {
padding: 210px 0px 0px 10px;
}
#photo {
float: left;
width: 624px;
}
#photo div {
border: 1px solid #a5b87c;
padding: 2px;
}
#photo img {
display: block;
}
#search-news {
float: right;
width: 240px;
}
#search-news div {
padding: 0px 0px 0px 0px;
}
#search-news #q {
width: 240px;
border: 1px solid #859D31;
margin: 1em 0 0 1em;
}
#search-news .downcast {
background: #E6E7E7;
border-top: 1px solid #CFD0D0;
padding: 0px 3px 3px 3px;
margin: 0.2em 0 0.4em 1em;
}
#search-news h3 {
background: url(images/bullet_letter.gif) no-repeat;
padding-left: 15px;
font-weight: bold;
margin: 1em 0 0.4em 1em;
}
#search-news p {
padding-left: 15px;
padding-right: 2px;
margin: 1em 0 0.4em 1em;
background: #7a895d repeat-x;
}
a {
font-weight: bold;
color: #5C5C5C;
}
#body-left {
float: left;
margin: 20px;
width: 408px;
}
#body-right {
float: right;
margin: 20px;
width: 450px;
}
#body-full {
float: left;
width: 1000px;
}
#body-left ul.plussbullets {
margin-top: 245px;
margin-left: 120px;
padding: 0;
font-weight: bold;
position: relative;
}
#body-left ul.plussbullets li {
background: top left url(images/bullet_plus.gif) repeat-x;
margin: 0 0 10px 0;
padding: 0 0 0 25px;
position: relative;
}
#body h2, #body p {
margin: 0.3em 0;
}
#body-right p {
margin-right: 2em;
}
#body a.green {
color: #9AAB68;
font-weight: normal;
text-decoration: underline;
}
#gallery img {
float: left;
padding: 0 0 5px 5px;
}
#footer {
color: #FFFFFF;
background: #42453D url(images/footer_bg.gif) repeat-x;
padding: 10px 10px 10px 10px;
font-weight: bold;
}
#footer p {
margin: 0;
text-align: center;
padding: 0px;
}
【问题讨论】：
-
您的页面似乎无法在 Firefox 5 中运行...
-
这很令人困惑，因为我正在使用 Firefox 5 来查看它。嗯
-
我发现在 Safari 中，如果我单击页面上不在视频框或其他超链接中的任何其他位置，我的悬停功能就会恢复。我在想我必须在点击视频后转移焦点。这听起来可行吗？
-
刚刚在 Firefox 中再次测试。我之前在页面上看到了代码，但现在它似乎工作正常，很奇怪。我还注意到我在 Firefox 中看不到视频周围的红色框。此外，侧边栏中的第 2 项和第 4 项缺少
<a>标签，因此它们不是 Firefox 和 Safari 中的链接。除此之外，链接悬停对我来说适用于两种浏览器。