2

我一整天都在尝试解决这种风格问题，但徒劳无功。

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

表格线周围必须有灰色边框。它适用于除 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;
}

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

4

2 回答 2

2

问题：

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

于 2012-12-07T11:25:29.797 回答
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;
}

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

请让我知道我是否落后于某些地方来理解您的问题。

于 2012-12-07T11:32:43.913 回答