jquery toggle breaks float in ie

标签 jquery css

我在一个 div 中有一些文本,我想在图像的右侧显示。我希望文本环绕图像并在到达图像末尾后与页面左侧对齐。使用一个小的 jquery 脚本切换 div 的可见性。问题是,当切换可见性时,文本在到达图像底部后不再扩展到页面的左边距 - 而是继续继续,就好像图像是左边距一样。 html 基本上是这样的:

<html>
   <image float:left>
   <div id="toggleMe">lots of text here</div>
</html>

注意这两件事:这个问题不会发生在 firefox 中,只会发生在 IE 中(其他浏览器未测试过)。此外,如果未切换图像的可见性,它在 IE 中工作正常。

代码如下:

<script type="text/javascript">
$(loadStuff);

function loadStuff() {
    $("#divWorkExperience").hide();


    $("#btnShowWorkExp").click(function () {
        $("#divWorkExperience").toggle("slow");
        return false;
    });

截图

<div style="text-align:justify;">

   <img src="ContentImages/highres_22409206.jpg" style="height:300px;width:400px;float:left;clear:none; margin-right:6px;" alt="me" />
   <div id="divWorkExperience" style="display:block; clear:none;">lots of text</div>
</div>

最佳答案

像往常一样,我必须先发布问题才能找到答案。我不明白为什么会这样,但确实如此:

function loadStuff() {
    $("#divWorkExperience").hide();


    $("#btnShowWorkExp").click(function () {
        if ($.browser.msie) {
            $("#divWorkExperience").toggle();
        } else {
            $("#divWorkExperience").toggle("slow");
        }
        return false;
    });

关于jquery toggle breaks float in ie,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13325609/

相关文章:

javascript - 更新下拉列表中的值

javascript - 如何让 Javascript 停止从展开/折叠栏中删除我的填充

javascript - 将延迟对象作为失败返回

javascript - Jquery onsubmit 动画不工作

javascript - AngularJS 组件定义为函数

css - 用于 IE 错误修复的图像放置

jquery - 克隆的图像更改固定的 div 位置

javascript - 未捕获的语法错误 : Unexpected reserved word

javascript - 正则表达式只接受数字和特定字符

javascript - 响应式 fullpage.js : increase viewport to display full content