XHTML是HTML的一种更加严格的版本，需要符合更为严格的规范，语法上更为规范化。JS浮动代码在XHTML下失效，主要是因为XHTML不允许使用空标签来代替一些书写不完整的标签，如img、input等。因此，浮动代码在XHTML下需要进行一些特殊处理。
以下是两个解决XHTML下JS浮动失效问题的示例：
1.将浮动元素封装在一个div中
<!DOCTYPE html>
<html>
<head>
<title>浮动元素封装在div中</title>
<meta charset="UTF-8">
</head>
<body>
<div class="outer">
<div class="inner" style="float:left;width:100px;height:100px;background:#f00;"></div>
<div class="inner" style="float:right;width:100px;height:100px;background:#0f0;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
在XHTML下，将浮动元素封装在一个div中，让这个div来负责清理浮动，可以保证浮动效果不失效。
2.使用CSS清除浮动
<!DOCTYPE html>
<html>
<head>
<title>CSS清除浮动</title>
<meta charset="UTF-8">
<style>
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }
.clearfix { display:block; }
.outer { background:#000; }
.inner { float:left; width:100px; height:100px; }
</style>
</head>
<body>
<div class="outer clearfix">
<div class="inner" style="background:#f00;"></div>
<div class="inner" style="background:#0f0;"></div>
</div>
</body>
</html>
在XHTML下，可以使用CSS清除浮动。上述代码中，我们定义了一个clearfix类，该类的after伪元素用于清理浮动。其原理是伪元素在元素外部进行排列，达到清理浮动的效果。同时，我们也给outer元素添加了一个背景色，方便查看效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：XHTML下,JS浮动代码失效的问题 - Python技术站
微信扫一扫 
支付宝扫一扫 