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

Posted 2023-03-05

【中文标题】Internet Explorer 8 中隐藏的顶部 TD 边框

【英文标题】：Hidden top TD border in Internet Explorer 8

【发布时间】：2012-11-25 12:43:35

【问题描述】：

我一整天都在尝试解决这个风格问题，但没有成功。

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;

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

【问题讨论】：

似乎tr 没有占用 IE 中表格的 100% 宽度

@simo L 检查我的答案，如果需要任何更改，请告诉我。

【参考方案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/

【讨论】：

谢谢。我将background-color 移动到table（并将标题设为白色背景）以保持旧样式。

【参考方案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;

我已经注释了不必要的代码。

如果我在理解您的问题方面有些滞后，请告诉我。