重复缩进错误

最新推荐文章于 2024-08-12 21:44:16 发布

lpbottle

最新推荐文章于 2024-08-12 21:44:16 发布

阅读量529

点赞数

分类专栏： W3C验证文章标签： function xhtml internet class float html

本文链接：https://blog.csdn.net/lpbottle/article/details/6899721

版权

W3C验证专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题描述:如果要应用某个边距的浮动框与浮动方向相反，并且浮动框后直接跟有内联内容，则第一行内联内容的缩进量将与该边距相同。

影响: Internet Explorer 6.0

可能性: 非常可能

解决办法:给浮动元素添加 display:inline;

实例：

存在“重复缩进错误”的代码如下(你可以在自己的DW下验证)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>下拉框左右选择</title>
		<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			div.centent {
				float: left;
				text-align: center;
				margin: 10px;
				display: inline;
			}
			span {
				display: block;
				margin: 2px;
				padding: 4px 10px;
				background: #898989;
				color: white;
				font-size: 12px;
				cursor: pointer;
			}
		</style>
	</head>
	
	<body>
		<div class="centent">
			<select multiple="multiple" id="select1" style="width:100px; height:160px;">
				<option value="1">选项1</option>
				<option value="2">选项2</option>
				<option value="3">选项3</option>
				<option value="4">选项4</option>
				<option value="5">选项5</option>
				<option value="6">选项6</option>
				<option value="7">选项7</option>
				<option value=8"">选项8</option>
			</select>
			<div>
				<span id="add">选中添加到右边>></span>
				<span id="add_all">全部添加到右边>></span>
			</div>
		</div>
		<div class="centent">
			<select multiple="multiple" id="select2" style="width:100px; height:160px;"></select>
			<span id="remove"><<选中删除到左边</span>
			<span id="remove_all"><<全部删除到左边</span>
		</div>
		<script type="text/javascript">
			$(function() {
				$("#add").click(function() {
					var $options = $("#select1 option:selected");	// 获取 select1 被选中的选项
					$options.appendTo("#select2");	// 将 select1 中选中的选项追加给 select2
				});
				$("#remove").click(function() {
					var $options = $("#select2 option:selected");	// 获取 select2 被选中的选项
					$options.appendTo("#select1");	// 将 select2 中选中的选项追加给 select1
				});
				$("#add_all").click(function() {
					var $options = $("#select1 option");	//获取 select1 的所有选项
					$options.appendTo("#select2");	// 将 select1 中的所有选项追加给 select2
				});
				$("#remove_all").click(function() {
					var $options = $("#select2 option");	//获取 select2 的所有选项
					$options.appendTo("#select1");	// 将 select2 中的所有选项追加给 select1
				});
				$("#select1").dblclick(function() {
					var $options = $("option:selected", this);	// 获取 select1 选中的选项
					$options.appendTo("#select2");	// 将 select1 中选中的选项追加给 select2
				});
				$("#select2").dblclick(function() {
					var $options = $("option:selected", this);	// 获取 select2 选中的选项
					$options.appendTo("#select1");	// 将 select2 中选中的选项追加给 select1
				});
			});
		</script>
	</body>
</html>

解决方法：给css中div.centent添加 display:inline

再次验证，重复缩进错误就消失了

lpbottle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重复缩进错误

问题描述:如果要应用某个边距的浮动框与浮动方向相反，并且浮动框后直接跟有内联内容，则第一行内联内容的缩进量将与该边距相同。影响: Internet Explorer 6.0 可能性: 非常可能解决办法:给浮动元素添加 display:inline;实例：存在“重复缩进错误”的代码如下(你可以在自己的DW下验证)：下拉框左右选择
复制链接

扫一扫

专栏目录