Question

我正在研究this site，它在Chrome和Firefox中运行良好，但在Safari或IE中运行良好。

在0.6s过渡点击时，圆形图像应更改为完整尺寸（650px宽度）图像。

在Safari中，图像中的边框半径将被忽略（它们是方形div），并且过渡效果不佳，图像在过渡时间内重叠。

在Internet Explorer中，javascript没有做任何事情，javascript正在运行，你可以在上面的段落中看到图片，更改语言的工作原理（即js）。

我在这一切都是绿色的，所以我想知道这有什么问题..我该如何解决？

据我所知，这对浏览器来说并不难，而且我知道IE有名气，但这仍然是简单的javascript，它必须工作不是吗？

这是每张图片的html外观：

    <a name="t1"></a>
    <a href="#t1">
    <div class="galeria">
        <div class="normal" id="t1" onclick="SelectOrUnSelect(t1)">
            <img src="galeria/obra/1.Naturaleza.jpg" />
            <p>Relato I. Naturaleza</p>
            <p>Tale I. Nature</p>
        </div>
    </div>
    </a>

这是改变图像类的javascript：

var divSelected = null;
function SelectOrUnSelect(x)
{
if(divSelected != null) divSelected.className = 'normal';
divSelected = x;
x.className = 'activa';
}

和css：

.normal{
width:200px;
min-height:0;
max-height:0;
padding:100px 0;
margin:20px auto;
overflow:hidden;
    -webkit-border-radius:100px;
    -moz-border-radius:100px;
    -o-border-radius:100px;
border-radius:100px;
    -webkit-transition:0.6s;
    -moz-transition:0.6s;
    -o-transition:0.6s;
transition:0.6s;
}


.normal img{
    overflow:hidden;
    margin:-100px 0;
    width:150%;
    position: relative;
    left: -30%;
    top:0;
}



.activa{ 
width:100%;
min-height:400px;
border-radius:0;
padding:0;
margin:0 auto;
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
display:block;
}

.activa:last-child{ 
    margin:0 auto 55px auto;
}

.activa img{
    width:100%;
        -webkit-border-radius:0.2%;
        -moz-border-radius:0.2%;
        -o-border-radius:0.2%;
    border-radius:0.2%;
}

感谢阅读和帮助！

Answer 1

以下是一些可以尝试的事情。

修复doctype，它应该是：<!DOCTYPE html>

使用getElementById：

function SelectOrUnSelect(x) {
    if (divSelected != null) {
        divSelected.className = 'normal';
    }
    var el = document.getElementById(x);
    divSelected = el;
    el.className = 'activa';
}

并将内联代码参数更改为字符串，例如：

SelectOrUnSelect('t1')

javascript和css不在safari中工作，即

1 个答案: