Question

我在SharePoint 2010页面中有大量的CSS和HTML（直接通过SharePoint Designer插入，而不是在webpart中插入）。我将所有HTML放在div中，以防止它弄乱SharePoint的标记。

我有一张链接表，其背景图片在悬停时会发生变化。它在IE11（2列x 2行）中看起来很好，但在Firefox，Chrome和Safari中，它是不可思议的（1列x 4行）。这是我的janky标记（原谅我，不知道相关的是什么）：

CSS

#MV td {
height: 90px;
width: 300px;
background-repeat: no-repeat;
overflow: hidden;
}
#MV td a {
display: block; 
padding: 1.5em 0em 0em 0em;
height: 75%;
width: 100%;
background-repeat: no-repeat;
overflow:hidden;
}
#MV td a:hover {
background-image: url('img2.gif');
background-position:top left;
}
.sensory {
display:block;
background:transparent url('img.gif') center top no-repeat;
}

HTML

<div id="MV">
<!--sensory table-->
<table style="float:left;">
<caption>Sensory and<br/>Product Development</caption>
<tr>
<td class="sensory"><a href="#">Sensory Discrimination<br/>Panel Test</a></td>
<td class="sensory"><a href="#">Sensory<br/>Cutting</a></td>
</tr>
<tr>
<td class="sensory"><a href="#">Sensory Sample<br/>Screening</a></td>
<td class="sensory"><a href="#">Organoleptics<br/>Evaluation</a></td>
</tr>
</table>
</div>

如何为所有四种浏览器强制将表格强制为2x2？感谢您提供的任何帮助！

Answer 1

从 .sensory

中删除显示：阻止

    .sensory {
    vertical-align: middle;
    background:transparent url('img.gif') center top no-repeat;
      }

    #MV td a {
     display: block;
     padding-left: 5px;
     width: 100%;
     background-repeat: no-repeat;
     overflow: hidden;
    }

表格行在Firefox，Chrome，Safari中无效

1 个答案: