如何修復不同Web瀏覽器的視頻大小和字體換行

Question

問題 ：視頻容器與Chrome，Firefox和Edge上的視頻高度之間存在微小差異。 此外，img縮略圖旁邊的自動換行在兩行之間增加了額外的空間。

截圖： https ： //i.imgur.com/sCk3vd5.png

 /* Video player CSS */ #video_player { display: table; margin: 0 auto; background: #000; max-width: 1140px !important; max-height: 360px !important; } #firstvideo { height: 100%; } #firstvideo #wistia-khpjv95u1u-1 { height: 450px !important; width: 800px !important; overflow-y: hidden !important; } #video_player #wistia-khpjv95u1u-1, #video_player #figcaption { display: table-cell; vertical-align: top; background: #FFFFFF; overflow-y: scroll; } #video_player #figcaption { border: 2px solid #9aacd5; border-left: 0px; } #video_player #figcaption a:nth-of-type(7) { border-bottom: none; } #vidcontainer { height: 360px; width: 303px; } #video_player #figcaption a { display: flex; font-size: 14px; border-bottom: 1px solid #e3e5eb; color: #000000; text-decoration: none; padding: 12px 12px 13px 12px; } #figcaption a:hover { background: #E3E5EB; color: #000000 !important; } #figcaption a:focus { background: #406acb; color: white !important; } .wistia_bento_item_name { vertical-align: top; font-family: Arial; padding-left: 2%; } #video_player #figcaption::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; } #video_player #figcaption::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } #video_player #figcaption::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #c1daec; } /* Firefox (any) */ @-moz-document url-prefix() { #vidcontainer { height: 450px !important; overflow-y: scroll !important; } .wistia_bento_item_thumb { height: 60px; width: 100px; } #video_player #figcaption a { font-size: 12px !important; } } /* Firefox (newest) */ @-moz-document url-prefix() { @supports (animation: calc(0s)) { #vidcontainer { height: 450px !important; overflow-y: scroll !important; } .wistia_bento_item_thumb { height: 60px; width: 100px; } #video_player #figcaption a { font-size: 12px !important; } } } /* Chrome & Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #vidcontainer { height: 450px !important; } .wistia_bento_item_thumb { height: 60px !important; width: 100px !important; } #video_player #figcaption a { font-size: 12px !important; } } /* Internet Explorer */ _:-ms-fullscreen, :root .ie11up { #vidcontainer { height: 450px !important; overflow-y: scroll !important; } .wistia_bento_item_thumb { height: 60px !important; width: 100px !important; } #video_player #figcaption a { font-size: 12px !important; } } /* Microsoft Edge */ @supports (-ms-ime-align:auto) { .wistia_bento_item_thumb { height: 60px !important; width: 100px !important; } } 

 <div id="video_player"> <div id="firstvideo"> <div class="wistia_embed wistia_async_khpjv95u1u playlistLinks=auto"></div> </div> <div id="figcaption"> <div id="vidcontainer"> <a href="#wistia_khpjv95u1u"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5e9af872d0c0b2c36a90b650175f270eb8e3a306.jpg?&image_crop_resized=100x60" width="100" alt="The Future of Company Tickets"><span class="wistia_bento_item_name">The Future of Company Tickets</span></a> <a href="#wistia_rcyldd4352"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/56111fc6eed70ca28114e4a993b60a0b98919fc2.jpg?&image_crop_resized=100x60" width="100" alt="Company Tickets & the New Tax Law"><span class="wistia_bento_item_name">Company Tickets & the New Tax Law</span></a> <a href="#wistia_wo1fhqfjpf"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/a804723abfe40dc8d08c68a40720d1b665048a2d.jpg?&image_crop_resized=100x60" width="100" alt="How Anheuser-Busch Measures Sponsorship ROI"><span class="wistia_bento_item_name">How Anheuser-Busch Measures Sponsorship ROI</span></a> <a href="#wistia_jq9vslkedz"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/fbc60cb44f6460c81a761fe37cb667b46f4f1602.jpg?&image_crop_resized=100x60" width="100" alt="How CDW Makes Every Ticket Count"><span class="wistia_bento_item_name">How CDW Makes Every Ticket Count</span></a> <a href="#wistia_qyx5135wzh"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/5293578ec9cd1793fc03ff7aef2ddcfba996e7ed.jpg?&image_crop_resized=100x60" width="100" alt="Providing the ROI of Company Sports Tickets"><span class="wistia_bento_item_name">Providing the ROI of Company Sports Tickets</span></a> <a href="#wistia_qdmez6tsor"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/0e6c3548db9d6f27e5b482f19ededf230f6f2b01.jpg?&image_crop_resized=100x60" width="100" alt="Putting your Tickets in Salesforce"><span class="wistia_bento_item_name">Putting your Tickets in Salesforce</span></a> <a href="#wistia_4j36xyw6cl"><img class="wistia_bento_item_thumb" src="https://embed-ssl.wistia.com/deliveries/15cbe0b7232cb132c8ebf79c2e19b928db4ebe92.jpg?&image_crop_resized=100x60" width="100" alt="Building Your Own Ticket App"><span class="wistia_bento_item_name">Building Your Own Ticket App</span></a> </div> </div> </div> 

在添加媒體查詢之前，間距很好，但我現在無法看到問題所在。 有人可以幫忙嗎？

Answer 1

通過向#video_player #figcaption a添加line-height：16px來修復行高問題：

#video_player #figcaption a {
  display: flex !important;
  font-size: 12px !important; 
  border-bottom: 1px solid #e3e5eb;
  color: #000000;
  text-decoration: none;
  padding: 12px 12px 13px 12px;
  line-height: 16px !important;
}

通過增加視頻高度修復視頻高度問題：

@media (min-width: 1024px) {
  #wistia-khpjv95u1u-1 {
    height: 100% !important;
  }
  #wistia-khpjv95u1u-1 > div {
    height: 454px !important;
  }
  #wistia-khpjv95u1u-1 > div > * {
    height: 454px !important;
  }
}