Javascript 多媒体资料中的图像不显示在IE中

我正在尝试创建一个照片库。当我在Firefox、Chrome和Safari中查看它时，它工作得非常完美，正如预期的那样。但是（毫不奇怪），IE没有正确显示图像

我已经确定了以下问题： 1.）大图像不会显示，但是，您仍然可以右键单击图像应该位于的空间，并将图像保存到计算机中。 2.）多媒体资料会自动滚动到最后一张图片

该网站尚未上线，因此以下是相关的javascript、css和html：

 /*Time for the CSS*/

/*body, html { color: rgb(155, 152, 144); } this does not fix miscoloration of template*/
/* possible IE fixes:
 *
 * <meta http-equiv="X-UA-Compatible" content="IE=7"/>
 */



.slider{

    width: 640px; Same as width of the large image
    position: relative;
    /*Instead of height we will use padding*/
    padding-top: 320px; /*That helps bring the labels down*/

    margin: 100px auto;

    /*Lets add a shadow*/
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
    position: absolute;
    left: 0; top: 0;
    transition: all 0.5s;
}





.slider input[name='slide_switch'] {
    /* display none for radio buttons is not compatable with IE,
     * using (potential) fix from http://www.jotform.com/answers/23448-IE-problem-with-radio-buttons
     */ 
    /*display: none;*/
    position: absolute; left: -9999px;
}

label { display: block; cursor: pointer; line-height: 20px; padding-bottom: 9px;  }








.slider label {
    /*Lets add some spacing for the thumbnails*/
    margin: 18px 0 0 18px;
    border: 3px solid #999;

    float: left;
    cursor: pointer;
    transition: all 0.5s;


    /*next two css properties are for IE-------------------------------*/
    zoom: 1;
    filter: alpha(opacity = 60);
    /*Default style = low opacity*/
    opacity: 0.6;
}

.slider label img{
    display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
    border-color: #666;
    /*next two css properties are for IE----------------------------------*/
    zoom: 1;
    filter: alpha(opacity = 100);
    opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
    /*next two css properties are for IE----------------------------------*/
    zoom: 1;
    filter: alpha(opacity = 0);
    opacity: 0;
    transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
    /*next two css properties are for IE----------------------------------*/
    zoom: 1;
    filter: alpha(opacity = 100);
    opacity: 1;
    transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/

/*CSS的时间*/
/*正文，html{color:rgb（155152144）；}这不会修复模板的错误颜色*/
/*可能的IE修复：
*
* 
*/
.滑块{
宽度：640px；和大图像的宽度相同
位置：相对位置；
/*我们将使用填充物代替高度*/
顶部填充：320px；/*有助于降低标签*/
保证金：100像素自动；
/*让我们添加一个阴影*/
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
/*剩下的最后一件事是添加过渡*/
.slider>img{
位置：绝对位置；
左：0；上：0；
过渡：均为0.5s；
}
.滑块输入[name='slide_开关']{
/*单选按钮显示无与IE不兼容，
*使用来自的（潜在）修复http://www.jotform.com/answers/23448-IE-problem-with-radio-buttons
*/ 
/*显示：无*/
位置：绝对；左侧：-9999px；
}
标签{显示：块；光标：指针；线条高度：20px；填充底部：9px；}
.滑块标签{
/*让我们为缩略图添加一些间距*/
利润率：18px 0 0 18px；
边框：3px实心#999；
浮动：左；
光标：指针；
过渡：均为0.5s；
/*接下来的两个css属性是针对IE的-------------------------------*/
缩放：1；
过滤器：α（不透明度=60）；
/*默认样式=低不透明度*/
不透明度：0.6；
}
.滑块标签img{
显示：块；
}
/*添加单击效果的时间到了*/
.滑块输入[name='slide_switch']：选中+标签{
边框颜色：#666；
/*接下来的两个css属性是针对IE的----------------------------------*/
缩放：1；
过滤器：α（不透明度=100）；
不透明度：1；
}
/*现在单击任何缩略图应更改其不透明度（样式）*/
/*是时候处理主要图像了*/
.slider输入[name='slide_开关']~img{
/*接下来的两个css属性是针对IE的----------------------------------*/
缩放：1；
过滤器：alpha（不透明度=0）；
不透明度：0；
转换：比例（1.1）；
}
/*以110%的大小隐藏所有主图像
单击后，图像将以正常大小显示以完成效果
*/
.滑块输入[name='slide_switch']：选中+标签+img{
/*接下来的两个css属性是针对IE的----------------------------------*/
缩放：1；
过滤器：α（不透明度=100）；
不透明度：1；
变换：比例（1）；
}
/*现在单击任何缩略图都会激活与其相关的图像*/

以下是（部分）HTML：

<!--MAIN PAGE HERE-->



    <h1>advancement photo galley!</h1>
    <h3>great stuff!!!</h3>



     <!--
We will make a slider with stylized thumbnails using CSS3
The markup is very simple:
Radio Inputs
Labels with thumbnails to detect click event
Main Image

thumbnail images are 100x50
full size images are 600x300???
-->
<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label for="id1"><img src="images/1.jpg" width="100" alt="1" /></label><!--this image is the thumbnail image-->
    <img src="images/1.jpg" alt="1"/><!--this one is the larger displayed image-->





    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label for="id2">
        <img src="images/2" width="100" alt="1"/>
    </label>
    <img src="images/2.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id3"/>
    <label for="id3">
        <img src="images/3" width="100" alt="1"/>
    </label>
    <img src="images/3.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id4"/>
    <label for="id4">
        <img src="images/4.jpg" width="100" alt="1"/>
    </label>
    <img src="images/4.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id5"/>
    <label for="id5">
        <img src="images/5.jpg" width="100" alt="1"/>
    </label>
    <img src="images/5.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id6"/>
    <label for="id6">
        <img src="images/6.jpg" width="100" alt="1"/>
    </label>
    <img src="images/6.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id7"/>
    <label for="id7">
        <img src="images/7.jpg" width="100" alt="1"/>
    </label>
    <img src="images/7.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id8"/>
    <label for="id8">
        <img src="images/8.jpg" width="100" alt="1"/>
    </label>
    <img src="images/8.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id9"/>
    <label for="id9">
        <img src="images/9.jpg" width="100" alt="1"/>
    </label>
    <img src="images/9.jpg" alt="1"/>

    <input type="radio" name="slide_switch" id="id10"/>
    <label for="id10">
        <img src="images/10.jpg" width="100" alt="1"/>
    </label>
    <img src="images/10.jpg" alt="1"/>
</div>

<br><br><br>
<img src="arrow.jpg" id="current" onclick="this.answer.value=Scroll();" alt="arrow">
writeNum();


<!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixes
You can download it from http://leaverou.github.com/prefixfree/ -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<p><br><br><br>
this is an image gallery for advancement services


these are words describing what is going on on this page

all of this is really important imformations</p>

先进照相馆！
好东西！！！




writeNum（）；




这是一个先进服务的图像库
这些文字描述了本页的内容
所有这些信息都非常重要

---

提前感谢您的帮助/建议。出于安全考虑，我不得不省略了很多细节，我希望这些信息足够详细。

我要做的第一件事是为图像添加高度属性。虽然宽度和高度属性从规范中被降低到了css中，但是oldIE依赖于它们，所以最好两者都有。基本上，如果其中一个值缺失，则假定您的高度为0。愚蠢，我知道，但这对你来说太老了。大多数其他浏览器会做正确的事情，查看图像数据以确定其尺寸

---

我还注意到您的宽度设置为

width=“100”

。可能需要指定单位：

width=“100px”

如果您有这么大的代码，最好将它放在JSFIDLE中；专家们很容易快速回答。IE的所有版本都有问题吗？更新：在CSS中指定高度。使用高度：自动；具有指定的宽度（100%的容器，如果您要响应），浏览器将（通常）按比例缩放它。你可能需要告诉非常旧的IE你想要的高度，但我会在旧IE有条件的样式表中这样做。如果可以避免将img维度作为属性放入DOM中，那么应该这样做。