61,112
社区成员
发帖
与我相关
我的任务
分享IE8 CSS BUG table div img max-width，给折磨死了，高分求解
首先用table tr td分左右两格，右边有两个div，其中comment_content存放正文内容，在模拟数据中有一个img标签，里面放了一张2560x1600的大壁纸，这里为了防止大图宽度超出，添加了为img标签添加了max-width:800px;样式，在firefox、ie6、ie7、ie9中都正常，但是ie8中，max-width起到了作用，但右边却留下了空白，把comment_footer给撑出了窗口，折腾了一天了，求帮助，求指导！~
完整代码如下：
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.comment_content {
margin:5px;
font-size:12px;
min-height:120px;
height:auto;
border:1px solid red;
}
.comment_content img {
width:expression(this.width > 800 ? "800px" : this.width)!important;
max-width:800px; /*IE8 BUG 过宽图片占位问题*/
border:1px solid blue;
}
.comment_footer {
margin:5px;
float:right;
}
</style>
</head>
<body>
<table>
<tr>
<td >
<div style="width:180px">
<input id="Checkbox1" name="ID" type="checkbox" runat="server" value='1' class="form_checkbox"/>
nickname<br />
2014/06/07 18:55
</div>
</td>
<td>
<div class="comment_content">
浏览器支持 <br />
<img src="http://b.zol-img.com.cn/desk/bizhi/image/5/2560x1600/1405474388902.jpg" />
</div>
<br /><br />
<div class="comment_footer">
<input type="radio" value="0" />显示 <input type="radio" value="1" />隐藏 <a href="###">设置</a>
</div>
</td>
</tr>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
jameshi 2016-04-28
- 打赏
- 举报
给table添加样式table-layout: fixed 参考http://www.hustlzp.com/post/2014/01/ie8-compatibility
xjune2014 2014-07-17
- 打赏
- 举报
顶起求帮助!
xjune2014 2014-07-16
- 打赏
- 举报
$(this).width()这个值默认就是800，因为max-width:800px已经起了作用，因奇怪的用$(this).css({width:800});或$(this).width(800);对img的width重新赋值800后，右边的空白就消失了，看来真是个bug
但问题是现在的正文内容是从数据库中读取然后原样输出的，所以没办法为img标签加上id或name，而且除了正文外，页面上其它地方还有一些功能性的img标签，这种情况下应该如何准确的select出正文中的img标签呢[/quote]
1、这是不是一个IE8的BUG
2、如解决这个问题
xjune2014 2014-07-16
- 打赏
- 举报
$(this).width()这个值默认就是800，因为max-width:800px已经起了作用，因奇怪的用$(this).css({width:800});或$(this).width(800);对img的width重新赋值800后，右边的空白就消失了，看来真是个bug
但问题是现在的正文内容是从数据库中读取然后原样输出的，所以没办法为img标签加上id或name，而且除了正文外，页面上其它地方还有一些功能性的img标签，这种情况下应该如果select出正文中的img标签呢
人生难得一只鸡 2014-07-16
- 打赏
- 举报
也许你可以通过js的方式来实现，当图片加载完毕后，判断，修正为等比缩放后，加载到页面上，如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.comment_content {
margin:5px;
font-size:12px;
min-height:120px;
height:auto;
border:1px solid red;
}
.comment_content img {
border:1px solid blue;
}
.comment_footer {
margin:5px;
float:right;
}
</style>
<script>
window.onload=function(){
var div=document.getElementById('comment_content');
var img=new Image();
img.src='http://b.zol-img.com.cn/desk/bizhi/image/5/2560x1600/1405474388902.jpg';
img.onload=function()
{
if(this.width>800)
{
this.style.width='800px';
this.style.height=this.height/(this.width/800)+'px';
}
div.appendChild(img);
}
}
</script>
</head>
<body>
<table>
<tr>
<td >
<div style="width:180px">
<input id="Checkbox1" name="ID" type="checkbox" runat="server" value='1' class="form_checkbox"/>
nickname<br />
2014/06/07 18:55
</div>
</td>
<td>
<div class="comment_content" id="comment_content">
浏览器支持 <br />
</div>
<br /><br />
<div class="comment_footer">
<input type="radio" value="0" />显示 <input type="radio" value="1" />隐藏 <a href="###">设置</a>
</div>
</td>
</tr>
</table>
</body>
</html>
xjune2014 2014-07-16
- 打赏
- 举报
IE8下才会，FireFox、IE6、7、9下都没有这个问题
vertical-align: bottom;这个样式加上后还是一样
xjune2014 2014-07-16
- 打赏
- 举报
已经，且只能在css社会comment_content下图片标签的样式
wobgudan 2014-07-16
- 打赏
- 举报
给图片一个class属性
<img class="imglist" src="http://b.zol-img.com.cn/desk/bizhi/image/5/2560x1600/1405474388902.jpg" />
wobgudan 2014-07-16
- 打赏
- 举报
<script type="text/javascript" src="http://www.feiyit.net/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".imglist").each(function(){
var winW=$(this).width();
$(this).css({width:winW});
})
})
</script>张运领 2014-07-16
- 打赏
- 举报
表示没有在测试中，发现你所说的问题，你试试加一下这个属性，然后看看有没有作用
.comment_content img {
vertical-align: bottom;
}wobgudan 2014-07-16
- 打赏
- 举报
为什么不借助js处理下呢？
