关于Tabs组件的HTML/CSS/Bootstrap跨浏览器兼容问题求助

Hey there, let's work through those two tab layout bugs you're seeing across Firefox and Chrome. Table-based layouts can be tricky for cross-browser consistency, so we'll swap to a more reliable approach and tweak the styles to fix both issues at once.

The Problems Recap #

• Firefox: When narrowing the window, the main content panel doesn't align with the tab buttons.
• Chrome: Tab buttons have inconsistent heights (works fine in Firefox), but setting height:100% on .buttonContainer breaks Firefox's layout.

The Solution: Switch to Flexbox & Tweak Styles #

Flexbox is far more predictable across browsers than table-based layouts for this kind of equal-width, equal-height component. Here's the revised CSS, with explanations for each change:

.tabContainer{ 
  width: 100%; 
  height: auto; 
}
.buttonContainer{ 
  width: 100%; 
  display: flex; /* Replace table layout with flex for consistent behavior */
}
.buttonContainerTableCell{ 
  flex: 1; /* Force each tab button container to take equal width */
}
.tabContainer .buttonContainer button{ 
  width: 100%; 
  height: 100%; 
  outline: none; 
  cursor: pointer; 
  border: 1px solid #999999; 
  text-transform: uppercase; 
  font-weight: bold; 
  padding: 10px; 
  box-sizing: border-box; /* Ensure padding doesn't expand button width */
}
.tabContainer .buttonContainer button:hover{ 
  background-color: white; 
  border-bottom: 1px solid white; 
}
.tabContainer .buttonContainer button:focus{ 
  background-color: white; 
  border-bottom: 1px solid white; 
}
.tabContainer .buttonContainer button.active { 
  background-color: white; 
  border-bottom: 1px solid white; 
}
.tabContainer .tabPanel{ 
  height: auto; 
  width: auto; 
  background-color: white; 
  color: black; 
  border-left: 1px solid #999999; 
  border-bottom: 1px solid #999999; 
  border-right: 1px solid #999999; 
  list-style-position: inside; 
  padding: 50px; 
  box-sizing: border-box; /* Prevent padding from pushing panel outside container */
}

Why This Works #

1. Fixing Firefox Alignment:

   • The old display:table layout in Firefox could unevenly distribute width when tabs wrapped or window size changed. Flexbox's flex:1 ensures every tab button container takes exactly 25% of the available width (since there are 4 tabs), so the main panel will always align perfectly with the tab row.

2. Fixing Chrome Button Height Inconsistency:

   • Removing float:left from buttons was key—floats break the natural height inheritance that table-cell/flex layouts rely on. With Flexbox, the buttons automatically inherit the full height of their container, so all tabs stay the same height across Chrome and Firefox.
   • box-sizing:border-box ensures padding doesn't add extra width/height to buttons or panels, preventing unexpected layout shifts.

Your HTML doesn't need any changes—just swap in this CSS, and both issues should be resolved!

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