кнопка изображения не видна внутри ячейки таблицы

Question

Мой HTML код

<tr> 
    <td><input type="image" style="height:25px; width:25px;" src="plus.png"></td> 
</tr> 

ячейка создается, но изображение не отображается. Однако, если я использую тег img, он отображается, поэтому проблем с src изображения не возникает.

EDIT: CSS связаны, может быть проблема, но не могу понять, что: -

*{ 
     font-family: Arial, sans; 
     margin: 0; 
     padding: 0; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
    } 

    h1 { 
     margin: 1em 0; 
     text-align: center; 
    } 

    #container { 
     margin: 0 auto; 
     width: 50%; 
    } 

    #container input { 
     height: 2.5em; 
     visibility: hidden; 
    } 

    #container label { 
     background: #f9f9f9; 
     border-radius: 1em 1em 0 0; 
     color: #888; 
     cursor: pointer; 
     display: block; 
     float: left; 
     font-size: 1em; 
     height: 2.5em; 
     line-height: 2.5em; 
     margin-right: .25em; 
     padding: 0 1.5em; 
     text-align: center; 
    } 

    #container input:hover + label { 
     background: #ddd; 
     color: #666; 
    } 

    #container input:checked + label { 
     background: #DBF3FD; 
     color: #444; 
     position: relative; 
     z-index: 6; 
     /* 
     -webkit-transition: .1s; 
     -moz-transition: .1s; 
     -o-transition: .1s; 
     -ms-transition: .1s; 
     */ 
    } 

    #content { 
     background: #DBF3FD; 
     border-radius: 0 .25em .25em .25em; 
     min-height: 18em; 
     position: relative; 
     width: 100%; 
     z-index: 5; 
    } 

    #content div { 
     opacity: 0; 
     padding: 1.5em; 
     position: absolute; 
     z-index: -100; 
    } 

    #content-1 p { 
     clear: both; 
     margin-bottom: 1em; 
    } 
    #content-1 p.last { 
     margin-bottom: 0; 
    } 

    #content-2 p { 
     float: left; 
     width: 48.5%; 
    } 
    #content-2 p.column-right { 
     margin-left: 3%; 
    } 

    #content-3 p { 
     float: left; 
     width: 48.5%; 
    } 
    #content-3 p.column-right { 
     margin-left: 3%; 
    } 

    #container input#tab-1:checked ~ #content #content-1, 
    #container input#tab-2:checked ~ #content #content-2, 
    #container input#tab-3:checked ~ #content #content-3 
    { 
     opacity: 1; 
     z-index: 100; 
    } 

    input.visible { 
     visibility: visible !important; 
    } 
    table { 
     font-family: arial, sans-serif; 
     border-collapse: collapse; 
     width: 100%; 
    } 

    td, th { 
     border: 1px solid #dddddd; 
     text-align: left; 
     padding: 8px; 
    } 

    tr:nth-child(odd) { 
     background-color: #FFFFFF; 
    } 
    table { 
     border-collapse: collapse; 
     width: 100%; 
    } 

    th, td { 
     padding: 8px; 
     text-align: left; 
     border-bottom: 1px solid #ddd; 
    } 

    tr:hover{background-color:#96DCF7} 

Answer 1

Попробуйте с помощью CSS. Добавьте style=" background-image: url("plus.png");" для ввода тега. input type="image" Недействительное свойство атрибута типа.

Answer 2

В своем коде, вы пишете, что вход:

input.visible { 
    visibility: visible !important; 
} 

Но у вас также есть:

input { 
    visibility: hidden; 
} 

Вы никогда не относятся к .Visible класса на код, который вы показать нам, так что остается скрытый. Возможно, это проблема. Попробуйте добавить class="visible" на вход.

<tr> 
    <td> 
     <input class="visible" type="image" style="height:25px; width:25px;" src="plus.png"> 
    </td> 
</tr> 

Answer 3

Это похоже на проблему с другим кодом, взаимодействующим с вашим html. Следующий код работает для меня:

<table> 
    <thead> 
    <tr> 
     <th>Image</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><input type="image" src="Image.png"></td> 
    </tr> 
    </tbody> 
</table> 

Может быть, вы должны начать здесь, а затем добавить свои стили обратно понемногу до тех пор, пока не найдете то, что вызвало проблему.

EDIT: Я скопировал весь код, который вы поставили здесь, и предположил, что у вас есть div с идентификатором контейнера и еще один div с идентификатором содержимого и что ваш стол жил там. Следуя совету @Benjamin Naesen, я установил видимость на видимую, и картина появилась.

input.visible { 
    visibility: visible; 
} 

Это работало для вас?