Как я могу заставить эти абсолютные позиции CSS работать в IE? - PullRequest
Новая
       1

Как я могу заставить эти абсолютные позиции CSS работать в IE?

0 голосов
/ 10 декабря 2011

Пожалуйста, посмотрите на код ниже.Если вы посмотрите на диаграмму тела, каждый цвет представляет различный контент справа.Однако эти ссылки не будут работать в IE, я полагаю, из-за написанного мной CSS.

Может кто-нибудь пролить свет на то, как я могу воспроизвести это в IE?

HTML: 

<div id="male">
    <img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
    <div class="head"><span class="whole fakelink"></span></div>
    <div class="neck"><span class="whole fakelink"></span></div>
    <div class="arm1"><span class="whole fakelink"></span></div>
    <div class="arm2"><span class="whole fakelink"></span></div>
    <div class="torso"><span class="whole fakelink"></span></div>
    <div class="legs"><span class="whole fakelink"></span></div>
</div>

CSS: 

div.head {
    position: absolute;
    width: 70px;
    margin-left: 31px;
    height: 70px;
}
div.neck {
    position: absolute;
    height: 6px;
    width: 18px;
    margin: 70px 0px 0px 56px;
}
div.arm1 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 100px;
}
div.arm2 {
    position: absolute;
    height: 105px;
    width: 30px;
    margin: 77px 0px 0px 0px;
}
div.torso {
    position: absolute;
    height: 118px;
    width: 70px;
    margin: 77px 0px 0px 31px;
}
div.legs {
    position: absolute;
    height: 105px;
    width: 69px;
    margin: 195px 0px 0px 31px;
}
.whole {
    width:100%;
    height:100%;
    display:block;
}
.fakelink {
    color:white;
    font-weight:bold;
}
.fakelink:hover {
    cursor: pointer;
    text-decoration:none;   
}

1 Ответ

1 голос
/ 10 декабря 2011

Я знаю только два решения, чтобы решить эту проблему, хотя оба они в конечном итоге сводятся к необходимости фона:

Вариант 1
Установите background-color на .fakelink, который не является прозрачным. Хотя в вашем случае это явно не очень полезно, оно иллюстрирует необходимость фона.

Если вам нужна только поддержка IE9, я бы предложил использовать rgba с низкой непрозрачностью альфа: 

.fakelink{ background-colour: rgba(255,255,255,0.01) }

Вариант 2
Используйте маленький прозрачный .png или .gif и используйте его как background-image для .fakelink

...