IE8 CSS BUG table div img max-width，给煎熬死了，高分求解

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 />

                    &nbsp;&nbsp;&nbsp;2014/06/07 18:55

                </div>

            </td>

            <td>

                <div class="comment_content">

                    浏览器支持&nbsp;&nbsp;<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" />显示&nbsp;<input type="radio" value="1" />隐藏&nbsp;<a href="###">设置</a>

                </div>

            </td>

        </tr>

    </table>

</body>

</html>

------解决方案--------------------

<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>

------解决方案--------------------
也许你可以通过js的方式来实现，当图片加载完毕后，判断，修正为等比缩放后，加载到页面上，如下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE8 CSS BUG table div img max-width，给煎熬死了，高分求解

相关推荐