发表新帖
发表新帖

Chrome-specific CSS issue setting table cell to display:block

前端 未结
关注
3 581
甜味超标
甜味超标 2021-01-02 17:14

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

相关标签:
3条回答
  • 走了就别回头了
    2021-01-02 17:21

    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.

    0 讨论(0)
  • 渐次进展
    2021-01-02 17:27

    I always define the doctype, but this issue started occuring after the last Chrome update 45.0.2454.85 in my responsive design. The stacked table cells would render as a hybrid of table-cell and table-row after resizing the browser at responsive breakpoints (media queries), or when switching from portrait to landscape and back (if landscape didn't stack the table cells and portrait did). This bug occurs only when there are more than two table cells.

    The solution: In the containing table row tr set it to display:table-cell.

    table.classname tr { display:table-cell !important; }
table.classname td { display:block; width:100% !important; }
    0 讨论(0)
  • 自闭症患者
    2021-01-02 17:44

    I used display: block; in a galery situation, so no table, just an url with HP generated code.

    display: block;, nor display table-cell worked for me (I don´t have a table!)

    For me display: table; worked like a charm.

    0 讨论(0)
 看不清?
提交回复
热议问题