CSS在多款浏览器正常仅Firefox异常，求排查解决建议

测试情况 #

• 笔记本电脑上以下浏览器显示正常：
  • Chrome
  • Edge
  • Opera
  • Maxthon
  • Vivaldi
  • Brave
• 仅Firefox例外

同时在10英寸安卓平板（同款浏览器）及其他台式机（同款浏览器）测试，结果一致。

预期正常显示效果 #

Firefox异常显示效果 #

请问该如何解决？能否指出问题所在？提供一些建议？谢谢！

相关代码 #

CSS代码 #

@keyframes animation {
  from {
    background-color: lightblue;
    color: darkblue;
  }
  to {
    background-color: darkblue;
    color: white;
  }
}

.my-table {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  background-color: BlueViolet;
  position: relative;
}

.text-title-box {
  width: 100%;
  padding: 25px;
  max-width: 100%;
  font-size: 15px;
  text-wrap: balance;
  position: relative;
}

.text-title-box:nth-child(odd) {
  animation: animation .5s/*infinite*/
  ;
  background-color: lightblue;
  color: darkblue;
  text-align: right;
}

.text-title-box:nth-child(odd) a {
  animation: animation .5s/*infinite*/
  ;
  background-color: #8ac7db;
  color: darkblue;
}

.text-title-box:nth-child(odd) a:hover {
  color: #8ac7db;
  background-color: darkblue;
}

.text-title-box:nth-child(even) {
  animation: animation .5s/*infinite*/
  ;
  background-color: darkblue;
  color: white;
  text-align: left;
}

.text-title-box:nth-child(even) a {
  animation: animation .5s/*infinite*/
  ;
  background-color: #00004d;
  color: lightblue;
}

.text-title-box:nth-child(even) a:hover {
  background-color: lightblue;
  color: #00004d;
}

.image-box-interior {
  position: absolute;
  height: 100%;
  width: min-content;
  background-color: cyan;
}

.image-box-interior img,
.tooltip-image img {
  height: 100%;
  display: inline-block;
  opacity: 1;
}

.image-box {
  width: 100%;
  position: relative;
}

.image-box:nth-child(odd) .image-box-interior {
  right: 0;
}

.image-box:nth-child(even) .image-box-interior {
  left: 0;
}

.image-box:nth-child(odd) .image-box-interior:hover .tooltip-image {
  right: 0;
}

.image-box:nth-child(even) .image-box-interior:hover .tooltip-image {
  left: 0;
}

.image-box .image-box-interior:hover .tooltip-image {
  display: block;
  padding: 5px;
  box-shadow: 5px 5px 15px 1px black;
  height: 120%;
}

img:hover {
  opacity: 1;
}

.tooltip-image {
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  background-color: orange;
  display: none;
  position: absolute;
  height: 100%;
  width: min-content;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  margin: 0 auto;
  /*padding-bottom: 5%;*/
  background-color: red;
}

div a {
  white-space: -moz-pre-wrap !important;
  /* Mozilla, since 1999 */
  white-space: -webkit-pre-wrap;
  /* Chrome & Safari */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: pre-wrap;
  /* CSS3 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  background-color: transparent;
}

div a:hover {
  background-color: transparent;
}

@media screen and (orientation:portrait) {
  .image-box,
  .image-box-interior,
  .tooltip-image {
    display: none;
  }
  .text-title-box {
    width: 75%;
  }
}

HTML代码 #

<div class="my-table">
  <div class="text-title-box">
    agfdhgfd
    <br> asdfhdgjh
    <br> fdhjghgkm
    <br>
    <a href="aaa.pdf" target="_blank">adgshgfhkghk</a>
    <br> dgjhgk
  </div>
  <div class="image-box">
    <div class="image-box-interior">
      <img src="https://picsum.photos/200/300" />
      <span class="tooltip-image">
                    <a href="aaa.pdf" target="_blank">
                        <img src="https://picsum.photos/200/300" /> 
                    </a>
                </span>
    </div>
  </div>
</div>
<div class="my-table">
  <div class="image-box">
    <div class="image-box-interior">
      <img src="https://picsum.photos/200/300" />
      <span class="tooltip-image">
                    <a href="bbb.pdf" target="_blank">
                        <img src="https://picsum.photos/200/300"  />  
                    </a>
                </span>
    </div>
  </div>
  <div class="text-title-box">
    klhjjf
    <br> pyuiouikty
    <br> mfgvnf
    <br>
    <a href="bbb.pdf" target="_blank">bdghtehtsr6</a>
    <br> dfhtdrfyuhn
  </div>
</div>

内容的提问来源于stack exchange，提问作者aditz_a