Css issue with Internet Explorer

Question

我的弹出框可以很好地与除Internet Explorer之外的其他浏览器配合使用。我找不到问题。有人能帮帮我吗？

弹出框

问题出在类似Facebook的按钮和推特按钮上。尝试使用与Internet Explorer不同的浏览器查看。然后在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;
}

Jsfddle

Answer 1

将overflow: hidden;和float: right;赋予包含FB和Twitter iframe的div，即具有类gallery-buttons-fb和gallery-buttons-tw的div。

Answer 2

尝试在上设置宽度

.gallery-buttons { }

因为现在ie不知道宽度。顺便说一下，我测试了它，并用宽度修复了它。

Answer 3

尝试将宽度添加到.库按钮

.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;
}