Question

我一直在努力解决这个风格问题，但是徒劳无功。

表格线条周围必须有灰色边框。它适用于除Internet Explorer 8之外的所有浏览器。

.order_table table {
  border-collapse: collapse;
}
.order_table table tbody tr {
   border: 1px solid #DEDEDE;
}

除了第一个<TD>之外，它确实为整个表提供了边界，但后来我尝试使用

强制它

.order_table table td.product_format {
  border-bottom: 1px solid #DEDEDE;
  border-top: 1px solid #DEDEDE;
}

但它没有用。任何人都能以正确的方式指导我吗？

Answer 1

问题：

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //IE put the background color upside the border
   background-color: #FAFAFA;
}

解决方案：

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //Deleted the background-color
}

工作示例：

http://jsfiddle.net/9HP9Q/2/

Answer 2

我认为你想要小提琴中的输出http://jsfiddle.net/9HP9Q/3/

我刚刚将颜色更改为红色以便于查看，因此请根据需要对其进行修改。

.product_name {
font-size: 30px;
font-family: 'MisoBold';
text-transform: uppercase;
color: #3F3F3F;
}
.order_table table {
margin-left: 0px;
width: 390px;
xheight: 100px;
border-collapse: collapse;
}
thead {
border-bottom: 1px solid #D5D3D0;
margin-bottom: 5px;
}

.order_table table {
border-collapse: collapse;
}
.order_table table tbody tr {
/*border: 1px solid #DEDEDE;*/
    border: 1px solid red;
/*background-color: #FAFAFA;*/
}
.order_table table td.product_format {
border-collapse: collapse;
padding-left: 20px;
font-weight: bold;
/*border-bottom: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE;*/
border-color: #DEDEDE;
position: relative;
height: 1px;
}
.price-promo {
top: 0 !important;
}
.qty_selector {
padding: 0px;
background: none;
border-top: none;
float: left;
  clear: both;
}
input[type="text"] {
width: 58px;
border: 1px solid #DEDEDE;
color: #333;
height: 23px;
padding-left: 8px;
overflow: hidden;
}
.qty_selector .qty_btn {
width: 11px;
margin-top: -2px;
padding-left: 3px;
background: none;
height: 32px;
  display: inline-block;
  vertical-align: middle;
}
.qty_selector .qty_btn a {
width: 11px;
padding: 0px;
background: none;
float: left;
margin: 1px 5px 1px 0;
}
.order_table table td {
vertical-align: middle;
padding: 7px;
}
.order_table table td.unit_price {
padding-right: 0;
text-align: center;
}
.unit_price .pricebykg {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
}

我已经评论了不必要的代码。

如果我在某个地方了解你的问题，请告诉我。

Internet Explorer 8中隐藏的顶级TD边框

2 个答案:

问题：

解决方案：

工作示例：