Ползунок громкости аудио-проигрывателя mediaelement под проигрывателем

Question

Я пытаюсь конвертировать мою тему в новый медиаплеер в WordPress версии 3.6.

CSS ломается в адаптивном режиме, а ползунок громкости отображается снаружи и под плеером. Когда вы меняете размер экрана, ползунок громкости многократно вставляется в положение и из положения, предлагая расчетную и возвращенную проблему ширины в плагине.

Answer 1

Я новичок, когда дело доходит до JQuery, но это, кажется, исправить...

Замените: b = this.controls.width() - a - (c.outerWidth(true) - c.width())

с: b = this.controls.width() - a - (c.outerWidth(true) - c.width())-1

То, что это делает, всегда заставляет ширину.mejs-time-rail быть на 1 px меньше, чем рассчитывается, поэтому css никогда не нарушается.

Answer 2

Я сделал это, добавив новую таблицу стилей, чтобы переопределить способ отображения по умолчанию.

// Hides any ugly overflow
.wp-audio-shortcode {
     overflow: hidden;
}

// Give ample room to the controls
.wp-audio-shortcode .mejs-controls {
    width: 101% !important;
}

Это решило это лучше, чем переопределение любых файлов ядра WordPress.

Answer 3

Недостаток CSS-решения - сделать контейнер немного шире, добавив его в style.css дочерней темы.

.mejs-container {
width: 101% !important;

}

Это не будет перезаписано при обновлении WordPress