Question

我有两个小提琴，两个都是完全相同的代码，但有一个例外：在第二个我包含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中的问题吗？

the first jsfiddle, showing the correct tooltips

the second link, this one shows an sizing problem in the tooltips

Answer 1

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

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

现在要修复jwlayer的问题，而不更改所有bootstrap / site元素的此规则（这可能会导致不必要的行为）将此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/
对不起的答案感到抱歉......

Bootstrap 3.0打破了JWPlayer

1 个答案: