一段CSS,火狐正常,ie错位。求解,谢谢!

zhongzuo1981 2012-05-23 03:10:46
火狐显示正常,ie显示错位。
代码如下:
<html>
<head>
</head>
<body>
<img id="bimg" src="bimg.jpg" />
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("bimg");
bimg.outerHTML = "<div style='float:right;'><img src='bimg.jpg' style='border-left:10px solid #F0F0F0;border-right:10px solid #F0F0F0;border-top:10px solid #F0F0F0;float:right;' title='百度' height='200' width='300'><p style='background-color:#F0F0F0;text-align:center;'>百度</p></div>";
}
</script>
</body>
</html>
...全文
179 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhongzuo1981 2012-05-24
  • 打赏
  • 举报
回复
用jquery实现了,谢谢各位!
$(document).ready(function(){
$('img').each(function(i){
var $div = $('<div></div>');
var $img = $(this).clone();
var position = $(this).css('float');
var iTitle = $img.attr('title');
var width = $(this).width();
$div.css({'float':position,'width':width,'position':'relative','border':'10px solid #F0F0F0','border-bottom':'none'});
var $p = $('<p style="margin:0;padding:0; background-color:#F0F0F0;text-align:center;">'+iTitle+'</p>');
$img.appendTo($div);
$p.appendTo($div);
$(this).replaceWith($div);
});
});
001007009 2012-05-23
  • 打赏
  • 举报
回复
低版本的firebug 不支持 outerHTML
楼主 换个方法呢?


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>    <img id="bimg" src="http://www.baidu.com/img/baidu_sylogo1.gif" />    </p>
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("bimg");
bimg.parentNode.removeChild(bimg);
str = "<div style='float:right; width:320px;'><img src='http://www.baidu.com/img/baidu_sylogo1.gif' style='border-left:10px solid #F0F0F0;border-right:10px solid #F0F0F0;border-top:10px solid #F0F0F0;float:right;' title='百度' height='200' width='300'><p style='background-color:#F0F0F0;text-align:center;'>百度</p></div>";
document.write(str)
}
</script>
</body>
</html>




看看可以不?
zhongzuo1981 2012-05-23
  • 打赏
  • 举报
回复
我需要保留P标签的内容,另外这样的代码也没错啊,只是js加载就不行了。郁闷!
<body>
<p>ABC<div>123</div><img src="http://www.baidu.com/img/baidu_sylogo1.gif"><p>abc</p></p>
</body>
yxhshuaiman 2012-05-23
  • 打赏
  • 举报
回复
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="pid">    <img id="bimg" src="http://www.baidu.com/img/baidu_sylogo1.gif" />    </p>
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("pid");
bimg.outerHTML = "<div style='float:right; width:320px;'><img src='http://www.baidu.com/img/baidu_sylogo1.gif' style='border-left:10px solid #F0F0F0;border-right:10px solid #F0F0F0;border-top:10px solid #F0F0F0;float:right;' title='百度' height='200' width='300'><p style='background-color:#F0F0F0;text-align:center;'>百度</p></div>";
}
</script>
</body>
</html>
这样吧
yxhshuaiman 2012-05-23
  • 打赏
  • 举报
回复
img放到p里面 就不能再加<div> <p>了 你把最外层的div 和 p去了 不会报错
yxhshuaiman 2012-05-23
  • 打赏
  • 举报
回复
img放到p里面 就能再加<div> <p>了 你把最外层的div 和 p去了 不会报错
001007009 2012-05-23
  • 打赏
  • 举报
回复
确实可以 outerHTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="bimg">div</div>
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("bimg");
bimg.outerHTML = "<span>span</span>";
}
</script>
</body>
</html>


再看看什么问题。
zhongzuo1981 2012-05-23
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 的回复:]
ie不支持 outerHTML
[/Quote]

我之前的代码ie可以运行啊,只是位置不多。
zhongzuo1981 2012-05-23
  • 打赏
  • 举报
回复
另外,还是火狐就没有问题。
001007009 2012-05-23
  • 打赏
  • 举报
回复
ie不支持 outerHTML
zhongzuo1981 2012-05-23
  • 打赏
  • 举报
回复
先谢谢了!
追问一下。
img放到p里面报错,问题出在哪?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>    <img id="bimg" src="http://www.baidu.com/img/baidu_sylogo1.gif" />    </p>
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("bimg");
bimg.outerHTML = "<div style='float:right; width:320px;'><img src='http://www.baidu.com/img/baidu_sylogo1.gif' style='border-left:10px solid #F0F0F0;border-right:10px solid #F0F0F0;border-top:10px solid #F0F0F0;float:right;' title='百度' height='200' width='300'><p style='background-color:#F0F0F0;text-align:center;'>百度</p></div>";
}
</script>
</body>
</html>
wgyygw5 2012-05-23
  • 打赏
  • 举报
回复
我也特别讨厌这个调试。火狐还有那个google的chorme,经常效果不同。大家应该统一啊
yxhshuaiman 2012-05-23
  • 打赏
  • 举报
回复
嗯 是的 加上 width:320px;就可以了 这样就固定了宽度
001007009 2012-05-23
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="bimg" src="bimg.jpg" />
<script type="text/javascript">
window.onload = function(){
var bimg = document.getElementById("bimg");
bimg.outerHTML = "<div style='float:right; width:320px;'><img src='bimg.jpg' style='border-left:10px solid #F0F0F0;border-right:10px solid #F0F0F0;border-top:10px solid #F0F0F0;float:right;' title='百度' height='200' width='300'><p style='background-color:#F0F0F0;text-align:center;'>百度</p></div>";
}
</script>
</body>
</html>




给外层的div定义个width

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧