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>标记之间添加一个空格，如下图所示：

A space between two <code><td></code> tags

以下是 JSFIDDLE ： http://jsfiddle.net/huydq91/HQ6Eu/

Answer 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);
}

要在两个<td>代码之间添加空格，请使用以下代码：

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

<强> DEMO

Answer 2

img类应该有一个边距或填充以将它们分开..请参阅小提琴：

http://jsfiddle.net/jFIT/HQ6Eu/3/

.news:nth-child(2), .news_img:nth-child(2)
{
    margin-left:50px;
}

如何在Chrome中运行框阴影并在td标记之间添加空格

2 个答案: