2014-02-10 88 views
-2

我正在致力于this site,它适用于Chrome和Firefox,但不适用于Safari或IE。javascript和css不能在Safari浏览器工作,例如

当在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%; 
} 

感谢您的阅读和帮助!

+0

请相关代码添加到这个问题。此外,该链接似乎被打破。 –

+0

完成,谢谢..我是新的在这一切抱歉.. – diegoguizar

+0

没有probs,男人:) –

回答

0

这里有几件事要尝试。

修复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') 
+0

我修正了doctype,该功能的工作方式相同(并且仍然没有做任何事情,即s感谢阅读和帮助解答 – diegoguizar

+0

奇怪的是,这对IE工作时我试过了,你看到控制台有什么错误吗? – Owlvark

+0

控制台没有错误。对不起,最近的回答,我已经出城 – diegoguizar

相关问题