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

通过将行高：16px添加到#video_player #figcaption a来解决行高问题：

#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;
  }
}

如何为不同的Web浏览器修复视频大小和字体换行

1 个答案: