EDM排版table设置padding在ie7下bug
2024-10-17 23:34:52
今天搞EDM发现一个在ie7下很扯淡的bug,由于以前没遇到过,所以花了点时间来解决下。
IE7下bug重现:
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="700" style="padding:20px;margin:0 auto;border:1px solid #000000;">
<tbody>
<tr>
<td style="background:#3A87AD;padding:10px 0;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
我们用ie7浏览器查看,会发现,有蓝色背景的内容变宽了,如下图(上面的是现代浏览器效果,下面的是ie7效果):
经过一些调试,发现是 table 上设置了 padding,而属于这个 table 的 td 也设置了padding 导致的 bug。
以上例子,就是因为 第1行的 table 设置了 padding,而第4行的 td 也设置了 padding 。
我们对以上例子做一下修改,我们保留第1行 table上的padding ,把第4行的td的padding复合属性分开写(padding-top:10px;padding-bottom:10px;),如:
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="700" style="padding:20px;margin:0 auto;border:1px solid #000000;">
<tbody>
<tr>
<td style="background:#3A87AD;padding-top:10px;padding-bottom:10px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
然后在 IE7 下面预览,发现和现代浏览器显示效果一样。
最新文章
- java学习笔记之线程1
- 从resfful API设计到加密算法
- LLBL Gen + Entity Framework 程序设计入门
- loadrunner11中java vuser引用jar包
- 乐易贵宾VIP教程:百度贴吧 - QQ部落 - QQ空间 Post实战系列视频课程
- Linux Discuz论坛的安装
- BFC学习笔记
- app之间的互相跳转
- Django 1.6 CBVs
- C++ 单链表基本操作
- 【转】wireshark过滤规则
- Reverse Nodes in k-Group 解答
- java设计模式笔记(1)-适配器模式
- 在for、foreach循环体中添加数组元素
- [贪心][高精]P1080 国王游戏(整合)
- Android 如何进行页面传递对象
- linux下ruby使用tcl/tk编程环境设置
- displaytag如何实现获取到每行的id字段的值。
- Android中ListView的简单使用
- 访问iis出现500.21错误