Internet Explorer的CSS问题

Question

my popup box working well with other browsers except Internet Explorer. I couldn't find the problem. Can someone help me please?

Popup box

The problem is at Facebook like button and Tweet button. Try to see it with different browser than Internet Explorer. Then view it in Internet Explorer.

HTML

<div class="gallery-buttons">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <div class="gallery-buttons-fb">
        <iframe src="//www.facebook.com/plugins/like.php?href=http://mw2.google.com/mw-panoramio/photos/medium/3141724.jpg&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=204284306319205" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>
    </div>
    <div class="gallery-buttons-tw">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://mw2.google.com/mw-panoramio/photos/medium/3141724.jpg" data-text="text" data-via="me" data-related="you" data-hashtags="tag">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
</div>

---

CSS

.gallery-comments {
}
.gallery-buttons-tw {
    float: right;
    height: 20px;
    width: 55px;
}
.gallery-buttons {
    background-color: #ECC5A6;
    border-radius: 3px 0 0 0;
    bottom: 22px;
    float: right;
    overflow: hidden;
    padding-left: 3px;
    padding-top: 1px;
    position: relative;
}
.gallery-image {
}
.gallery-top {
}
.gallery-container {
}
.gallery-wrapper {
    background-color: #E9E8E6;
    border-radius: 5px 5px 5px 5px;
    padding: 10px;
    width: 500px;
}
.gallery-buttons-fb {
    float: left;
    width: 46px;
}

Jsfiddle

Answer 1

Try to set width on the

.gallery-buttons { }

because now ie did not know the width. By the way I test it and with the width I fix it.

Answer 2

Give overflow: hidden; and float: right; to the DIVs containing FB and Twitter iframes, ie the ones with classes gallery-buttons-fb and gallery-buttons-tw .

Answer 3

Try adding width to .gallery-buttons

.gallery-buttons {
    background-color: #ECC5A6;
    border-radius: 3px 0 0 0;
    bottom: 22px;
    float: right;
    overflow: hidden;
    padding-left: 3px;
    padding-top: 1px;
    position: relative;
    width: 101px;
}