Chrome特定的CSS问题设置表单元格要显示：block

本文介绍了Chrome特定的CSS问题设置表单元格要显示：block的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我发现我想要什么。我使用chrome 32.0.1700.102，甚至在第一个答案惊人地工作正常为我。

但是，当我把下面的html放到一个新文件中并用chrome打开时，tds的computed styles选项卡仍然显示 display：table-cell; ：

 < html& 
< head> 
< style> 
 #block td {
 display：block; 
 background：#ccc; 
} 
< / style> ;, 
< / head> 
< body> 
< table> 
< tr> 
< td> a< / td> 
< td> b< / td> 
< td> c< / td> 
< td> d< / td> 
< / tr> 
< / table> 
 
< table id =block> 
< tr> 
< td> a< / td> 
< td> b< / td> 
< td> c< / td> 
< td> d< / td> 
< / tr> 
< / table> 
< / body> 
< / html>

当我在firefox中打开这个时，我得到所需的结果：

以下是chrome的屏幕截图，其中显示了样式标签中的display：block规则，但是在计算的标签中显示为：table-cell：

解决方案

我看不到文档中声明的任何 DOCTYPE ，当您不声明doctype时，Chrome会覆盖 display：block; display：table-cell;

它适用于JS Fiddle cuz他们有doctype声明。 p>

因此在之前的文档的最顶部使用<！DOCTYPE html> html> ，它应该可以解决问题。

I found this question that seemingly had what I wanted. I am using chrome 32.0.1700.102 and even the fiddle on the first answer amazingly works fine for me.

However, when I put the following html into a new file and open it up in chrome, the "computed styles" tab of the tds still show display:table-cell; :

<html>
    <head>
        <style>
            #block td {
                display: block;
                background: #ccc;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>

        <table id="block">
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
            </tr>
        </table>
    </body>
</html>

When I open this in firefox, I get the desired result:

Here is a screenshot of chrome showing the display:block rule in the style tab but display:table-cell in the computed tab:

解决方案

I don't see any DOCTYPE declared in the document, when you don't declare a doctype, Chrome overrides the display: block; with display: table-cell;

It works on JS Fiddle cuz they have doctype declared.

So use <!DOCTYPE html> at the very top of the document before <html> and it should fix the issue.

这篇关于Chrome特定的CSS问题设置表单元格要显示：block的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！