画廊中的图像不显示在IE中

Question

I am trying to create a photo gallery. When I view it in Firefox, Chrome, and Safari it works perfectly and as expected. However (not surprisingly), IE does not display the images correctly.

I have identified the problems as such: 1.) The large image does not display, however, you can still right-click the space where the image is supposed to be and save the image to your computer. 2.) the gallery automatically scrolls to the last picture.

The site is not live yet, so here is the relevent javascript, css, and 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*/

Here is (some) the 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>

Thank you in advance for any help/suggestions. For security reasons, I had to omit many details, I hope this is enough info to go off of.

Answer 1

The first thing I'd try is to add a height attribute to the images. Although width and height attributes have been depreciated from the spec in favour of setting them in css, oldIE relies on them so it's best to have both. Basically, if one of the values is missing it assumes you mean 0 height. Stupid, I know, but that's oldIE for you. Most other browsers will do the right thing and take a peek at the image data to figure out it's dimensions.

I also notice that your width is set to width="100" . It may be worth specifying the units: width="100px" .