如何将Fancybox标题上方的水平线向下调整位置？

Absolutely! This is a common rendering quirk specific to Chrome's layout engine, and we can resolve it with targeted CSS tweaks. Here's how to adjust that horizontal line so it doesn't overlap your images:

Step 1: Identify the Line's Selector #

First, use Chrome's DevTools (press F12 or right-click the line and select "Inspect") to find the exact CSS selector for the horizontal line. It's usually either:

• A pseudo-element like .fancybox-caption::before (most common for Fancybox's default divider)
• A dedicated element with a class like .fancybox-caption-divider

Step 2: Adjust the Line's Position #

Once you have the selector, add this custom CSS to your site (make sure it loads after Fancybox's default styles):

Option 1: Move the Line Down Directly #

If the line is a pseudo-element or positioned element:

/* Adjust the top value to push the line lower */
.fancybox-caption::before {
  top: 12px !important; /* Default might be 0 or a small negative value */
}

/* If it's a separate divider element */
.fancybox-caption-divider {
  margin-top: 15px !important; /* Increase space above the line */
  position: relative;
  top: 5px; /* Fine-tune vertical position */
}

Option 2: Add Space Below the Image #

Alternatively, you can increase padding below the Fancybox image to create more separation:

.fancybox-image {
  padding-bottom: 20px !important; /* Creates space between image and caption line */
}

Option 3: Target Chrome Exclusively (Optional) #

If you want to avoid affecting other browsers (since they work fine), use a Chrome-specific media query:

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  .fancybox-caption::before {
    top: 12px !important;
  }
}

Step 3: Fine-Tune the Values #

Play around with the pixel values (12px, 15px, etc.) until the line sits below your image without overlapping. Use Chrome's DevTools live editing to test changes in real-time—it's the fastest way to get the perfect position.

Just a quick note: Using !important ensures your custom styles override Fancybox's default CSS. If you can avoid it by making your selector more specific (e.g., body .fancybox-caption::before), that's even better for maintainability.

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