У меня есть стол с коробкой-тенью. Chrome и Firefox показывают тень, а сафари - нет. Ты хоть представляешь, откуда возникла проблема?
Я пытался манипулировать тенью, но она имеет тот же эффект.
.tr-info { background-color: blue; box-shadow: 0 -1px 0 0 #cccccc, 0 1px 0 0 #cccccc; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Your Website</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="../style.css" media="screen" /> </head> <body style="background: black;"> <div class="container"> <div class="row"> <div class="col-12 mt-5"> <table> <tr class="tr-info"> <td> 1 </td> <td> 2 </td> </tr> <tr class="tr-info"> <td>3</td> <td>4</td> </tr> </table> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
Я нашел другой пост: display: block it is:)
Попробуйте добавить это в tr
.tr-info{ transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); }
Я когда-то читал это где-то, никогда не использовал, но это могло сработать.