当前位置：首页 → 问答吧 → 请教大家一个简单的CSS问题。

请教大家一个简单的CSS问题。

时间：2010-06-01

来源：互联网

请问如何解决在IE6下 img 里的width="100%" 不是其上上级div width:600px 的宽度。
下面代码用FF运行，我想在IE6下要FF这种效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <div style="width:800px;height:auto;margin:0 auto;text-align:center; border:1px solid green;"> <div style="width:600px;margin:0 auto;text-align:center;border:1px solid red;"> <table border="0" style="width:100%;border:1px solid #000;text-align:center;"> <tr style="background-color:#eee;"> <td style="border:1px solid #ccc;padding:3px;"> <img alt="" src="http://fscxha.f4.91cdn.com/Content/Images/Product/ban_fmm.jpg" border="0" width="100%" /> </td> </tr> </table> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: lwdsThrone 发布时间: 2010-06-01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <div style="width:800px;height:auto;margin:0 auto;text-align:center; border:1px solid green;"> <div style="width:600px;margin:0 auto;text-align:center;border:1px solid red; overflow:hidden;"> <table border="0" style="width:100%;border:1px solid #000;text-align:center;"> <tr style="background-color:#eee;"> <td style="border:1px solid #ccc;padding:3px;"> <img alt="" src="http://fscxha.f4.91cdn.com/Content/Images/Product/ban_fmm.jpg" border="0" width="100%" /> </td> </tr> </table> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: liufuxiang101 发布时间: 2010-06-01

先谢谢2楼的回答。
但 overflow:hidden 不是FF下的这效果。

作者: lwdsThrone 发布时间: 2010-06-01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div style="width:800px;height:auto;border:solid 1px green;dispaly:block;margin:0 auto;"> <div style="width:600px;height:auto;margin:0 auto;border:solid 1px red;"> <table style="width:100%;background:#eee;height:100px;display:block;"> <tbody> <tr><td>aaaaaaaa</td><td>aaaaaaaaa</td></tr> <tr><td>bbbbbbbb</td><td>bbbbbbbbb</td></tr> <tr><td>cccccccc</td><td>ccccccccc</td></tr> </tbody> </table> </div> </div> </BODY> </HTML>
提示：您可以先修改部分代码再运行

我写了个，宽度是跟着父框架600PX走的100%自框架你可以看看

作者: cwq2jxl 发布时间: 2010-06-02

找到你的错误原因了 <img alt="" src="http://fscxha.f4.91cdn.com/Content/Images/Product/ban_fmm.jpg" border="0" width="100%" />
你图片原宽度是928PX 你设置WIDTH=“100%”=WIDTH="928px" ，这里的WIDTH是跟着图片原大小来的你把这个width设成600就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> </head> <body> <div style="width:800px;height:auto;margin:0 auto;text-align:center; border:1px solid green;"> <div style="width:600px;margin:0 auto;text-align:center;border:1px solid red;"> <table border="0" style="width:100%;border:1px solid #000;text-align:center;"> <tr style="background-color:#eee;"> <td style="border:1px solid #ccc;padding:3px;"> <img alt="" src="http://fscxha.f4.91cdn.com/Content/Images/Product/ban_fmm.jpg" border="0" width="600" /> </td> </tr> </table> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: cwq2jxl 发布时间: 2010-06-02

谢谢4楼的朋友。虽然不是我要的效果。
可能我想要的效果表达的不清晰，我另外想办法吧。

作者: lwdsThrone 发布时间: 2010-06-02

你可以利用绝对相对定位来做位置的前后啊~~、

作者: micore 发布时间: 2010-06-02