Question

好吧，这是我的问题。我正在尝试将一个soundcloud播放器放入我正在构建的网站中。唯一的问题是它在谷歌浏览器中无法点击。它在Firefox中运行良好，但是当我检查谷歌浏览器时，它无法正常工作。

编辑：它在FF中不起作用

以下是该页面的HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NoJoke Media</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

        <div id="header">
            <img name="nojoke" src="images/No_Joke_Media_Logo.png" alt="nojoke logo" />
        </div>
        <div>

            <nav>
                <ul>
                    <li><a href="/index.php">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Bio</a></li>
                    <li><a href="#">Media</a>
                        <ul>
                            <li><a href="/music.php">Music</a></li>
                            <li><a href="#">Vidos</a></li>
                            <li><a href="#">Photos</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

        </div>

        <div id="wrap">

            <div id="contain">

                <div id="other_content">
                    <div id="music">
                        <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F2395662&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=false"></iframe>
                    </div>
                </div>

            </div>

        </div>

        <div id="footer">
            <div id="social">
          <a href="#"><img src="images/facebook.png" width="60" height="60" /></a><a href="#"><img src="images/twitter1.png" width="60" height="60" /></a><a href="#"><img src="images/tumblr.png" width="60" height="60" /></a><a href="#"><img src="images/youtube.png" width="60" height="60" /></a><a href="#"><img src="images/email-icon.png" width="60" height="60" /></a></div>
          <center><p>Design by <a href="http://tomascordero.com">Tomas Cordero</a></p></center>
        </div>

     </div>

</body>
</html>

这是我的CSS：

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Geneva, Helvetica, sans-serif;
    background-color: #FFF;
    margin: 0;
    padding: 0;
    color: #CCC;
}
h1,h2,h3,h4,h5,h6,h7,h8,h9 {
    font: 100%/1 Verdana, Geneva, Helvetica, sans-serif;
    padding:0;
}
a {
    text-decoration: none;
    color: #0C0;
}
/*--Navigation bar--*/
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
        display: block;
}
nav ul {
    background: #181f32; 
    background: linear-gradient(top, #344268 0%, #181f32 100%);  
    background: -moz-linear-gradient(top, #344268 0%, #181f32 100%); 
    background: -webkit-linear-gradient(top, #344268 0%, #181f32 100%);
    box-shadow: 0px 0px 10px #000;
    padding: 0 10px;
    border-radius: 5px;  
    list-style: none;
    position: relative;
}
nav ul:after {
        content: ""; clear: both; display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
        background: #344268;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
            color: #fff;
}
nav ul li a {
        display: block; padding: 15px 20px;
        color: #fff; text-decoration: none;
}
nav ul ul {
    background: #181f32; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
nav ul ul li {
        float: none; 
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        position: relative;
}
nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
}   
nav ul ul li a:hover {
                background: #344268;
}
nav ul ul ul {
    position: absolute; left: 100%; top:0;
}
/*--container--*/
#container {
    left:50%;
    margin-left:-460px;
    width:900px;
    margin-bottom: 40px;
    position: absolute;
}
/*--Header--*/
#header {
    position:relative;
    width: 900px;
    height: auto;
    margin-bottom: 40px;
}
/*--Content--*/
#wrap {
    width: 900px;
    height:100%;
    position:relative;
}
#contain {
    width: 100%;
    height:100%;
    float:left;
    margin-bottom:20px;
    position: relative;
    z-index:-3;
}
#right {
    width: 220px;
    background: rgb(24, 31, 50);
    background: rgba(24, 31, 50, 0.8);
    float:right;
    margin-left:5px;
    border-top-right-radius: 5px;
    height:200px;
    box-shadow: 0 0 8px #000;
    border-bottom-right-radius:5px;
    padding:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}
#center {
    width: 450px;
    background: rgb(24, 31, 50);
    background: rgba(24, 31, 50, 0.8);
    height:800px;
    left:50%;
    float:right;
    box-shadow: 0 0 8px #000;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    margin-bottom: 300px;
    padding:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}
#left{
    width: 220px;
    border-top-left-radius: 5px;
    background: rgb(24, 31, 50);
    background: rgba(24, 31, 50, 0.8);
    height: 300px;
    float: left;
    box-shadow: 0 0 8px #000;
    border-bottom-left-radius:5px;
    padding:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;          /* Opera/IE 8+ */
}
/*--Content style--*/
.news_headline {
    text-align:justify;
    font-weight:bold;
    color:#FFF;
    padding-bottom:5px;
    text-transform:uppercase;
}
.news_body {
    text-align:justify;
    padding-bottom:5px;
}
.news_footer {
    text-align:left;
    font-size:9px;
    border-bottom:2px dashed #344268;
    padding-bottom:5px;
    margin-bottom:10px;
}
#twitterfeed {
    text-align:justify;
}
#twitterfeed h3 {
    font-weight:bold;
    font-size:18px;
    text-transform:uppercase;
    text-align:center;
}
#latest {
    text-align:justify;
}
#latest h3 {
    font-weight:bold;
    font-size:18px;
    text-transform:uppercase;
    text-align:center;
}
#news {
    text-align:justify;
}
#news h2 {
    font-weight:bold;
    font-size:22px;
    text-transform:uppercase;
    text-align:left;
    padding-left:10px;
}
/*--Footer--*/
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:150px;
    background: rgb(24, 31, 50);
    background: rgba(24, 31, 50, 0.8);
    box-shadow: 0 0 8px #000;
    padding:5px;
    border-top-right-radius:5px;
    border-top-left-radius:5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;          /* Opera/IE 8+ */
}
#social {
    width:100%;
    height:auto;
    padding-bottom:30px;
    border-bottom:2px dashed #344268;
    position:relative;
    text-align:center;
}
/*--Page other than index--*/
#other_content {
    background: rgb(24, 31, 50);
    background: rgba(24, 31, 50, 0.8);
    height: 800px;
    width:100%;
    box-shadow: 0 0 8px #000;
    padding:5px;
    border-radius: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    margin-bottom: 300px;
    position:relative;
    z-index:-4;
}
#music {
    width: 100%;
    height:300px;
    border-bottom:2px dashed #344268;
}

现在我在代码中一遍又一遍，我找不到问题

Answer 1

在

#other_content

我删除了

position:relative;

它似乎有效见jsfiddle

EDIT Aldo删除#content {position:relative;]

不能点击谷歌浏览器中的soundcloud小部件

1 个答案: