1

我有两个小提琴，两者都是完全相同的代码，但有一个例外：在第二个中，我包含了 bootstrap 3.0 (bootstrap.min.css)，代码没有任何变化。两者都是这样的：

HTML：

<div id="mediaplayer250"></div>

JavaScript：

jwplayer("mediaplayer250").setup({
   file: "http://clips.vorwaerts-gmbh.de/VfE_flash.mp4",
   autostart: true,
   tracks:[{
      file: "//thumbs.thehun.net/video/2014-04/250533d24fe409be_proverb.vtt",
      kind: "thumbnails"
   }]
});

请注意，播放视频并将鼠标移到进度条上会显示缩略图预览整齐地位于保留区域内

在第二个版本中，缩略图看起来比它应该适合的区域大。我该如何解决这个问题？这是 Bootstrap 3.0 或 JWplayer 中的问题吗？

第一个 jsfiddle，显示正确的工具提示

第二个链接，这个在工具提示中显示了一个大小问题

4

1 回答 1

0

这里的问题是以下引导规则：

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

现在要解决 jwlayer 的问题，而不更改所有引导程序/站点元素的此规则（这可能会导致不需要的行为），将此 CSS 规则添加到您的自定义 CSS 中：

.jwplayer *, .jwplayer *:before, .jwplayer *:after {
  -webkit-box-sizing: content-box!important;
  -moz-box-sizing: content-box!important;
  box-sizing: content-box!important;
}

查看您更新的小提琴： http: //jsfiddle.net/P9eJK/5/
很抱歉迟到的答案......

于 2015-03-19T15:52:56.527 回答