У меня проблема с отображением, которая возникает только в IE.
Я определил класс в CSS для «таблицы с закругленными углами» (означает TD на каждом из его углов, а не весь или случайный TD).
Я определил форму, на самом деле несколько небольших форм, с основными функциями, такими как удаление или изменение записи таблицы.
Таблица и связанные формы включены в PHP.
См. Скриншоты (IE, FF, CR): https://imgur.com/a/idAsO6H
IE использует CSS, который предназначен для правого нижнего угла таблицы для каждого TD с кнопкой отправки, которая является непреднамеренной. Похоже, это зависит от содержимого ТД.
Я уже подтвердил ниже:
Firefox и Chrome отлично работают независимо от содержимого TD, поэтому я могу сказать, что он ограничен только IE.
Это нежелательное поведение происходит с приложенным HTML-кодом, поэтому я могу сказать, что это не проблема на стороне сервера.
Я уже пытался поместить тег вне ТД, он не изменил поведение.
Когда содержимое ТД представляет собой просто текст (текст), проблем нет.
Когда содержимое ТД представляет собой кнопку или тип ввода submit (или), возникает проблема.
Я могу сказать, что это ниже линии CSS, которая запускается нежелательно, потому что я изменил радиус только в этом блоке стилей, чтобы быть уверенным:
таблица.почта tbody tr: последний тип td: последний тип
Теперь я делюсь соответствующими кодами HTML и CSS.
HTML код:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="../style.css">
</head>
<body>
<section>
<h1>Site Administration</h1>
<h2>Classes' Schedule</h2>
<table class="rounded">
<tbody>
<tr>
<td><strong>Monday</strong></td>
<td>19:00 - 22:00</td>
<td>Rugby</td>
<td>teacher 1, teacher 2</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="1">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
<tr>
<td><strong>Tuesday</strong></td>
<td>19:00 - 22:00</td>
<td>Soccer</td>
<td>teacher 3, teacher 4</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="2">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
<tr>
<td><strong>Friday</strong></td>
<td>19:00 - 22:00</td>
<td colspan=2>Description of regular events</td>
<td><form method="post" action="admin.php">
<button type="submit" name="class_to_delete" value="14">Delete</button>
</form></td>
<td><form method="post" action="admin.php">
Modify</form></td>
</tr>
</tbody>
<caption>List of Classes</caption>
<thead>
<tr>
<th class="centered">Day</th>
<th class="centered">Hours</th>
<th class="centered">Sport</th>
<th class="centered">Teachers</th>
<th>Del.</th>
<th>Modif.</th>
</tr>
</thead>
</table>
</section>
</body>
</html>
Код CSS:
table.rounded thead th:first-of-type { /* 10px 0 0 0 : Top Left, for table with min 2 columns */
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
table.rounded thead th:last-of-type { /* 0 10px 0 0 : Top Right, for table with min 2 columns */
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:last-of-type { /* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
}
table.rounded tbody tr:last-of-type td:first-of-type { /* 0 0 0 10px : Bottom Left, for table with min 2 columns */
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* - borders */
table.rounded {
border-collapse: separate;
}
table.rounded tr {
border: 0px;
}
table.rounded th,
table.rounded td {
border-top: 1px solid black;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid black;
}
table.rounded th:first-of-type,
table.rounded td:first-of-type {
border-left: 1px solid black;
}
table.rounded tr:last-of-type td {
border-bottom: 1px solid black;
}
table.rounded td.afterrowspan { /* follows in next tr, after the tr including the td which has rowspan defined */
border-left: 0px;
}
/* - corners [same as above] */
section table {
float: center;
max-width: 90%;
margin-top: 10px;
margin-bottom: 5px;
margin-left: auto; /* centers the table horizontally */
margin-right: auto; /* centers the table horizontally */
/*border: 1px solid black;*/
border-collapse: collapse; /* does not work with property Radius */
border-spacing: 0px;
}
section table th,
section table td {
color: #000000; /* Black */
font-size: 16px;
/* min-width: 150px; */
margin: 5px 0px 3px 0px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border: 1px solid black;
-webkit-border-radius: 0px;/*Safari,Opera,Chrome*/
-moz-border-radius: 0px;
border-radius: 0px;
vertical-align: middle;
text-align: left;
}
Мне нужна ваша любезная помощь:
Понять причину этого нежелательного поведения в IE
Найдите хак или обходной путь для IE, используя только HTML и CSS (без JS или каких-либо других дополнений).
Большое спасибо за вашу поддержку!