如何修改Chrome中<audio>元素高度？Firefox下可正常设置

Hey there, let's get that audio player looking consistent between Firefox and Chrome! Since this is a 2018 personal project using Flash over HTTP, we're targeting the browser behaviors from that era—here are some actionable fixes to try:

1. Reset Native Audio/Flash Control Default Styles #

Chrome often applies rigid default styles to native media controls (and embedded Flash objects) that can override your custom height settings. Start by forcing a reset with these CSS rules:

.BGM {
  height: [YOUR_TARGET_HEIGHT]px; /* Replace with your desired height value */
  display: block; /* Ensures the element respects block-level sizing rules */
  -webkit-appearance: none; /* Disables Chrome's default control styling */
  appearance: none;
  border: none; /* Optional: Remove unwanted default borders */
  padding: 0; /* Optional: Reset default padding */
}

/* If your player uses Flash <object>/<embed> tags, target those directly */
.BGM object,
.BGM embed {
  height: 100% !important; /* Force Flash object to inherit parent container height */
  width: 100% !important;
}

The -webkit-appearance: none rule is crucial here—it strips away Chrome's built-in media control styling that was likely ignoring your height property entirely.

2. Target Chrome's Specific Media Control Components #

If the above reset doesn't work, you can directly style Chrome's internal media control panel using webkit-specific pseudo-elements:

.BGM::-webkit-media-controls-panel {
  height: [YOUR_TARGET_HEIGHT]px !important; /* Force the control panel to your desired height */
}

/* Optional: Tweak other Chrome-specific control elements if needed */
.BGM::-webkit-media-controls-play-button {
  /* Customize play button size or position here */
}

This targets the actual panel that renders Chrome's audio controls, bypassing any hidden default size restrictions.

3. Fallback: Ensure Player Is Visible & Functional (If Exact Match Isn't Possible) #

If you can't get pixel-perfect consistency, focus on making sure the player doesn't get blocked and works as intended:

/* Wrap your player in a container if you haven't already */
.BGM-wrapper {
  min-height: [YOUR_TARGET_HEIGHT]px;
  position: relative;
  z-index: 10; /* Guarantees the player sits above other page content */
  overflow: visible; /* Prevents control elements from getting clipped */
}

.BGM {
  min-height: inherit;
  position: relative;
}

This ensures even if Chrome doesn't respect your exact height value, the player won't be hidden behind other page elements and remains fully functional.

Why Your Previous @Media Hacks Failed #

Older Chrome-specific media queries (like @media screen and (-webkit-min-device-pixel-ratio:0)) can sometimes be ignored due to browser updates or insufficient style specificity. Using direct webkit pseudo-elements or !important (sparingly) gives your custom styles higher priority over default browser rules.

内容的提问来源于stack exchange，提问作者user9265322