Good day! Faced the problem of displaying a div in different browsers. With Firefox, the issue was solved using a hack, but Safari does not want to interact with the hacks that are used. All that was on the pages of Google did not help with the solution of the problem. Does anyone have any suggestions how to fix this problem? Thank.

PS Style for Chrome is registered in the HTML file.

1 image - Google Chrome, 2 - Safari

enter image description here enter image description here

* { margin: 0; padding: 0; } .nav{ cursor:pointer; margin-left:30px; /*margin-top:30px;*/ font-family:Verdana; display:inline-block; z-index:5; } #nav-btn{ z-index:999; position:relative; background:rgba(0, 25, 53, 0); display:inline-block; padding:10px; right: 60px; top: 7px; } .nav-item{ transform:translate(0,-20px); opacity:0; cursor: auto; position:absolute; display:inline-block; transition:all 0.5s ease; visibility:hidden; } .nav-item .sup2 li{ cursor:auto; background:rgb(0, 129, 215); padding:7px 30px 8px 28px; list-style-type:none; border-bottom:1px solid #001935; top:0; /*margin-left:-50px;*/ font-size: 13px; font-family: Lato, sans-serif; text-align: center; } /*.nav-item .sup:before{*/ /*content:"";*/ /*position:absolute;*/ /*width:0;*/ /*height:0;*/ /*border-left:8px solid transparent;*/ /*border-right:8px solid transparent;*/ /*border-bottom:8px solid #ee5555;*/ /*top:8px;*/ /*left:0;*/ /*}*/ .nav-item .sup2 li .sub{ position:Absolute; width:100%; display:inline; left:120%; top:20px; z-index: 25; } .nav-item .sub{ opacity:0; transform:translate(-30px,0); visibility:hidden; transition:all 0.5s ease; } @-moz-document url-prefix() { .nav-item { padding-top: 26px; position: absolute; right: 500px; width: 122px; } } .nav-item .sup2 li .sub:before{ content:""; position:absolute; width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #ee5555; left:-13%; } 
 <td> <div class="nav" id="nav"> <div id="nav-btn" class="itemMenu faq"></div> <div class="nav-item" id="nav-item"> <ul class="sup2" style="padding-top: 15px;position: absolute;right: 2px;width: 122px;"> <li id="sub-trigger"> <a href="/faq" target="_blank" style="text-decoration: none;"> Guida</a> <ul class="sub2" id="sub"> </ul> </li> <li> <a href="" target="_blank" style="text-decoration: none;">Our site</a></li> <li style="border-radius: 0px 0px 10px 10px;"><a href="" target="_blank" style="text-decoration: none;">Contact Us</a></li> </ul> </div> </div> </td>

  • one
    Do .nav-item put top:0 , I don’t understand why you always write absolute without specifying the coordinates themselves. I think this is the problem - Artem Gorlachev
  • @ArtemGorlachev did not help, in Chrome and Safari the element is still displayed in different locations. ibb.co/ikbYZQ - Isabella Monza
  • on your screen, I just see that the top has become the same. - Artem Gorlachev
  • @ArtemGorlachev up yes, but as soon as I start adding right | left does not want to adapt. even the screenshot shows that the dropdown window in different cases when using only top: 0; has different positions on the right and on the left, in which the problem of the mind I will not put
  • Without a reproducible example, it's hard to say. But I see that a lot of superfluous has been written, and so it’s not possible to sort it out further - Artem Gorlachev

1 answer 1

I solved the problem by replacing position: absolute with position: relative and with the additional use of hacks for Chrome.