-1

示例代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span {display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>

它在 IE8 和可能较旧的版本中不起作用。有什么解决办法吗？

4

2 回答 2

1

我认为因为 span 标签是一个内联元素，它没有布局，不像 DIV 之类的块级元素。

将其交换到一个 div 并且它可以工作，或者，这种方法（将块布局分配给您的跨度，然后用 Jquery 隐藏）将保留您的标记并在 IE8 下按需要运行：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

span {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
<span>This is some text.</span>
</body>
</html>
于 2012-11-01T12:19:47.887 回答
0

如果您需要保留文本显示内联，请将跨度的 CSS 更改为“display:inline-block”，以下代码显示了此操作前后的文本：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

span {display:inline-block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").hide();
  $("button").click(function(){
    $("span").fadeIn(3000);
  });
});
</script>
</head>
<body>
<button>Fade in</button>
Previous text <span>This is some text.</span> Following text.
</body>
</html>
于 2012-11-01T12:25:17.167 回答