Странный z-index или проблема с ссылками в IE - PullRequest
Новая
       3

Странный z-index или проблема с ссылками в IE

0 голосов
/ 05 марта 2012

Я программирую сайт для своей школы, и я хотел, чтобы персонажи на заднем плане имели эффект наведения мыши.Когда вы наводите курсор мыши на эти символы в большинстве браузеров, появляется всплывающее окно, сообщающее, кто они.Это прекрасно работает во всех браузерах, кроме Internet Explorer.В IE крошечная часть ссылки кликабельна, а остальная - нет.Я не уверен, что это как-то связано с z-индексом подобного, потому что он имеет очень высокий установленный z-индекс.

Вот CSS: 

*
{
margin:0px;
padding:0px;
}

#grass
{
left: 0px;
background-repeat: repeat;
background-image: url(http://thestopitcampaign.com/images/grass.jpg);
bottom:0px;
margin:0px;
position:fixed;
padding:0px;
font-size:15px;
height: 200px;
width: 100%;
z-index:-6;
}

#env
{
z-index: -5;
position:fixed;
height:500px;
bottom:0px;
width:100%;
left:0px;
}

.envimg
{
bottom:0px;
position:fixed;
float:left;
display:block;
margin-left:auto;
margin-right:auto;
}

#people
{
padding: 0px;
bottom: 0px;
position: fixed;
width: 900px;
right: 50%;
left: 50%;
margin-right: -450px;
margin-left: -450px;
z-index:-4;
}

#school
{
width: 500px;
right: 50%;
left: 50%;
margin-right: -250px;
margin-left: -250px;
margin-bottom: 0px;
z-index:-5;
}

body, html
{
font-family: "PT Sans", sans-serif;
overflow-x:hidden;
overflow-y:auto;
-ms-overflow-x:hidden;
-ms-overflow-y:auto;
height:100%;
width:100%;
z-index:-7;
}

#wrapper
{
z-index: 1000;
position: relative;
height:100%;
padding-left:10px;
padding-right:10px;
overflow-x:hidden;
overflow-y:auto;
-ms-overflow-x:hidden;
-ms-overflow-y:auto;
}

.cloud
{
bottom: 0px;
left: -600px;
position:fixed;
z-index:-6;
}

#cloudpic
{
height:200px;
}

#sunmoon
{
position:fixed;
top:100px;
right:200px;
z-index:-7;
height:300px;
}

#sunmoonimg
{
height:300px;
}

#content
{
top: 40px;
border-color: black;
border-style: solid;
border-width: 2px;
background-color: #e6e6e6;
max-width: 1000px;
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
z-index: 1;
padding:30px;
-moz-border-radius: 15px;
border-radius: 15px;
}

h1
{
font-family: "Mate SC", sans-serif;
font-weight:normal;
font-size:7em;
margin:10px;
}

#main
{
text-align: center;
height:100%;
display:inline;
}

#logo
{
display: inline;
width: 100px;
}

@<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

@.nav ul
{
display: inline;
list-style-type:none;
margin-top:10px;
position:relative;
}

.nav li
{
display: inline;
margin:10px;
}

.nav a
{
display: inline;
text-decoration:none;
color:black;
}

.nav a:hover
{

    color: #ff451b;

}

#logodiv
{
top:10px;
width: 600px;
margin-right: auto;
margin-left: auto;
display: block;
position: relative;
z-index: 4;
text-align:center;
}

.nodec
{
text-decoration:none;
color:black;
}

img
{
display:inline;
}

#navbar
{
margin-right: auto;
margin-left: auto;
position: relative;
top: 0px;
display: block;
z-index: 4;
text-align:center;
font-size:30px;
font-family:"Oswald","American Typewriter","serif";
}

#header
{
margin-bottom: 10px;
font-size: 10px;
}

#logocorner
{
position:absolute;
bottom:10px;
left:10px;
z-index:-3;
}

#logopic
{
width:100px;
}

.nav a:active
{
    color: #c45c00;
}

#™
{
position:absolute;
top:0px;
}

#body
{
background-color: #7ebcff;
}

.name
{
font-weight:bold;
}

#name
{
border:1px solid black;
outline:none;
width:200px;
}

#message
{
height:50px;
width:200px;
resize:both;
border:1px solid black;
outline:none;
}

.name
{
text-align:left;
width:120px;
}

.post
{
text-align:left;
}

table.bulletin
{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
max-width:500px;
}

.post
{
display:block;
margin:5px;
}

td
{
padding:5px;
}

#post
{
width:200px;
position:relative;
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
margin-top:20px;
}

#submit
{
display:block;
position:relative;
width:202px;
text-align:center;
}

#showbulletin
{
cursor:pointer;
cursor:hand;
}

#showbulletin:hover
{
color: #ff451b;
}

#query
{
width:100px;
border:1px solid black;
outline:none;
}

#newmotd
{
width:100px;
border:1px solid black;
outline:none;
}

#motd
{
text-align:center;
margin-bottom: 20px;
font-size:15px;
font-style: italic;
}

#signup
{
    padding: 10px;
    background-color: #f98f0c;
    right:20px;
    top: 20px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
}

input.signup
{
    width:200px;
}

input.signupsubmit
{
    width:200px;
}

#txtDefaultHtmlArea
{
background-color: white;
height:300px;
width: 100%;
resize:both;
}

#signup:active
{
    background-color: #ff6914;
}

iframe
{
    background-color: white;
}

#suspensionlink
{
    left: 20px;
    padding: 10px;
    background-color: #f9de43;
    top: 20px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
}

#suspensionlink:active
{
    background-color: #ffc500;
}

.suspform
{
    text-align: center;
    display: block;
}

textarea.suspform
{
    padding: 2px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
    height: 100px;
    width: 300px;
}

span.suspform
{
    margin-bottom: 5px;
    margin-top: 15px;
    font-weight: bold;
}

form.suspform
{
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
}

#submitref
{
    margin-top: 10px;
}

input.suspform
{
    padding: 2px;
    width: 150px;
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
}

.cover
{
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 400px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

area
{
border: 1px dashed black;
}

ЗДЕСЬ DIV ДЛЯ ЯКОРНЫХ ТЕГОВ 

#container_people
{
z-index: 500;
padding: 0px;
bottom: 0px;
position: fixed;
height: 284px;
width: 1390px;
right: 50%;
left: 50%;
margin-right: -688.5px;
margin-left: -688.5px;
}

#popup
{
    text-align: center;
    padding: 5px;
    background-color: #e6e6e6;
    left:0px;
    bottom: 10px;
    display: block;
    position: absolute;
    border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 5;
    display:block;
    width:170px;
}

a
{
outline:none;
}

ЗДЕСЬ ЯКОРНЫЕ ТЕГИ 

.hoverover
{
    z-index: 5;
}

и вот HTML-код страницы: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="http://www.thestopitcampaign.com/stylesheet.css?1330921248" />
        <script type="text/javascript" src="http://thestopitcampaign.com/javascript/jquery.js?1330921248"></script>
        <script type="text/javascript" src="http://thestopitcampaign.com/javascript/curvycorners.js?1330921248"></script>
        <link href='http://fonts.googleapis.com/css?family=PT+Sans|Mate+SC|Righteous|Oswald' rel='stylesheet' type='text/css'>
        <meta name="description" content="STOP IT! ANTI-BULLYING CAMPAIGN." />
            <meta name="keywords" content="STOP, IT, stop, it, bullying, campaign, school, kids, adults" />     <title>
        The Stop It Campaign!       </title>
    </head>
    <body id="body">
        <div id="wrapper">

СНВ

Зоя: добрый свидетель ', 270); "onmouseout =" popuphide (); "> Лука: жертва", 450); "onmouseout = "popuphide ();"> Матео: наблюдатель ', 630); "onmouseout =" popuphide (); "> Миссис Бауэрс: учитель', 810);"onmouseout = "popuphide ();"> Макс: хулиган ', 1005); "onmouseout =" popuphide (); ">

END 

            <img class="envimg" id="school" src="http://thestopitcampaign.com/images/school.png" alt="school" />



        </div>
        <div id="sunmoon">
            <img id="sunmoonimg" src="http://thestopitcampaign.com/images/sun.png" alt="sun" />
        </div>
        <div id="grass"></div>
        <div class="cloud" id="cloud1"><img src="http://thestopitcampaign.com/images/cloud.png" alt="cloud" id="cloudpic" /></div>
                <div id="logodiv">
            <a href="http://thestopitcampaign.com/index.php" title="home" class="nodec"><h1>STOP IT!</h1></a>
        </div>
        <div id="motd">
            <p>"STAND UP, SPEAK UP, INFORM and DOCUMENT "</p>
        </div>
        <div id="navbar">
            <ul class="nav">
            <li class="nav"><a href="http://thestopitcampaign.com/about" class="nav">About</a></li>
            <li class="nav"><a href="http://thestopitcampaign.com/parents" class="nav">Parents</a></li>
            <li class="nav"><a href="http://thestopitcampaign.com/educators" class="nav">Educators</a></li>
            <li class="nav"><a href="http://thestopitcampaign.com/bulletin" class="nav">Bulletin</a></li>
            </ul>
        </div>
        <a href="http://thestopitcampaign.com/signup" class="nodec" title="Join S.T.O.P. I.T."><div id="signup" style="text-align:center;">
        Join the campaign!<br/>6 members!
        </div></a>
        <a href="http://thestopitcampaign.com/reflection" class="nodec"><div id="suspensionlink">Suspension Reflections</div></a>
        <div id="logocorner"><img src="http://thestopitcampaign.com/images/logo.png" id="logopic" alt="logo" title="The StopIt Campaign" /><span id="™">&trade;</span></div>

<script type="text/javascript" src="http://www.thestopitcampaign.com/javascript/environment.js?1330921248"></script>
    </div>
    </body>
</html>

Спасибо, что помогли мне, потому что у меня естьЯ потратил очень много времени, пытаясь понять это, и я уверен, что все мы согласны с тем, что IE очень разочаровывает веб-разработчиков.

ССЫЛКА НА САЙТ: http://thestopitcampaign.com

Ответы [ 2 ]

1 голос
/ 05 марта 2012

Я не уверен, какой IE вам подходит, но я сталкивался с странными проблемами при наведении курсора с абсолютно позиционированными ссылками, по крайней мере, до IE7.

Даже если вы укажете display: block, область «clickable» или «rolloverable» будет ограничена текстом в ссылке, но не заполнением или другими произвольными измерениями. Поскольку у вас нет текста в этих ссылках, да, вы будете ограничены очень маленькой областью.

Что мне помогло, так это наделив ссылку фоновым изображением - даже тем, которое на самом деле не существует.

Итак, в таблице стилей только для IE попробуйте что-то вроде: 

#container_people a {
    background: url(trasparent.gif);  
 }

Я обнаружил, что файл изображения (transparent.gif) на самом деле не должен существовать . IE просто должен подумать , что он существует. Да, но это работает.

Это помогло мне решить ряд проблем со ссылками.

0 голосов
/ 05 марта 2012

может быть, фреймворк javascript с кросс-браузерными возможностями, например jquery (в общем) или jquery tools (специальный оверлей ... подсказка) стоит посмотреть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...