发表新帖
发表新帖

How can I make “display: block” work on a in IE?

后端 未结
关注
5 1619
鱼传尺愫
鱼传尺愫 2020-12-09 01:24

Is there anything I can do to make IE display table cells as actual blocks?

Given this style:

table,tbody,tr,td,div {
  display: block;
  border: 1px
相关标签:
5条回答
  • 清酒与你
    2020-12-09 01:56

    I applied float: left to stuff. It kinda works.

    Live Demo

    The biggest problem is width: 100% combined with the padding is making things too wide.

    So:
    Live Demo (without the problematic padding)

    That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.

    This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).

    IE7:

    enter image description here

    0 讨论(0)
  • 谎友^
    2020-12-09 01:57

    The following worked for me for IE6+:

    
tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

    Assumptions:

    • cell height 30px

    Drawbacks:

    • Fixed cell height
    • Cumbersome specification of top property (maybe generate)
    • Only works when HTML provides classes for columns

    Advantage:

    • Works in all browsers.

    When to use:

    • When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
    0 讨论(0)
  • 小鲜肉
    2020-12-09 02:05

    Just figured it out with a collegue of mine.

    ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE! Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.

    That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.

    table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
    <table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

    0 讨论(0)
  • 心在旅途
    2020-12-09 02:09

    add this code:

    <!DOCTYPE html>

    我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。

    you need add this code in the top.

    <!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

    Add this line of code in the top, but use 'float' and 'width' is very good. sorry, my english so poor.

    0 讨论(0)
  • 遥遥无期
    2020-12-09 02:19

    make it display:table-row; instead of display:block It will work like it is supposed to

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