javascript - 如何在 Chrome 中运行 box shadow 并在 td 标签之间添加空格

Question

1。盒子阴影在 IE 和 Firefox 中运行良好，但在 Chrome 中不起作用。这是我的 CSS:

    body {
        background-color: #F6F6F6;
    }

    #showRoom {
        margin-left: 10px;
        margin-top: 10px;
        width: auto;
        border-collapse: collapse;
    }

    table .box_shadow {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
    }

    table tr .text_plan {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
    }

    .news {
        width: 309px;
        height: 175px;
        /*background-color: rgba(255, 0, 0, 0.5);*/
        background-color: #FFF;
        position: relative;
    }

        .news:hover {
            cursor: pointer;
        }

    .news_img {
        width: 309px;
        height: 45px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        font-family: 'Times New Roman';
        font-weight: bold;
        letter-spacing: 0.5px;
        display: none;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0.95;
    }

        .news_img div {
            width: 309px;
            height: 20px;
            margin: 0;
            padding: 0;
            display: table-cell;
            vertical-align: middle;
        }

            .news_img div p {
                font-size: 15px;
                color: #FFF;
            }

    span.imgswap {
        display: block;
    }

2。我想在两个 <td> 之间加一个空格标记如下图:

这是JSFIDDLE: http://jsfiddle.net/huydq91/HQ6Eu/

Answer 1

试试这个:

1. 添加display:block;给你的table .box_shadow CSS:

   table .box_shadow {
           background-color: #FFF;
           width: 175px;
           height: 175px;
           font-size: 18px;
           line-height: 20px;
           text-align: center;
           font-weight: normal;
           font-family: 'Scada', sans-serif;
            display:block;
            -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
           -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
           box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
   }
   

2. 在两个<td>之间加一个空格标签使用这个:

   .news:nth-child(odd), .news_img:nth-child(odd){
        padding-right: 20px;
   }
   

DEMO