Question

这只是一个实例。

我们正在将一个带有一些独特表格的网站迁移到Wordpress。在其中一个上，TD没有正确对齐并忽略我们放在它们上的任何高度规则，css或其他。我们所做的就是将表格以原始形式迁移到正确显示的地方，但却得到了奇怪的错误。花了最后4个小时试图解决这个问题。请点击以下链接查看 第二个表格 ：

Proper working table

Broken table

上面部分的高度应该精确为7px，但是当 没有填充或边距 时，则为16px。

有人有什么想法吗？

CSS

＆＃13;

/** Flow chart page **/

#padi_flowchart {
	width:580px !Important;
	margin:0;
	padding:0;
	color:#FFFFFF;
	background-image:url("/ocean-legends/wp-content/themes/Ocean%20Legends/Assets/img/padi_flowchart_background.jpg");
	background-postion:top left;
	background-repeat:no-repeat;
}
#padi_flowchart * {
	margin: 0;
	padding: 0;
}
#padi_flowchart a {
	color:#FFFFFF;
}
#padi_flowchart .fixwidth {
	height: 7px;
}
#padi_flowchart .fixwidth br {
	display: none;
}
#padi_flowchart .fixwidth img {
	width: 100% !Important;
}

＆＃13;

Answer 1

修复第一个table。这是ul列表中的浏览器默认边距和填充值导致的。这应该解决它。

.course_box ul {
    padding: 0 0 0 16px; /* or your value */
    margin: 0;
}

要解决第二个table我能想到的两种方式：

将line-height: 0;添加到td。这应该可以解决所有问题，但如果内部存在任何内容，请小心。
在表格单元格中将img vertical-align: bottom;和img下方设为vertical-align: top;。

表格单元忽略高度

1 个答案: