Safari浏览器中Responsive Grid CSS渲染问题求助

Hey Stephen, sorry to hear your responsive GridView is misbehaving in Safari—let’s break down the most likely fixes since Safari often needs extra vendor prefixes and compatibility tweaks compared to Chrome.

Common Safari Compatibility Pain Points & Fixes #

Safari (both desktop and mobile) has historically been pickier about CSS property support, especially for flexbox and pseudo-element behavior. Here’s how to adjust your code to cover these gaps:

1. Add Vendor Prefixes for Flexbox Properties #

Flexbox is widely supported, but older Safari versions require -webkit- prefixes for core flex properties. Update your responsive CSS to include these:

/* Base Grid Container */
.responsive-grid {
    display: -webkit-flex; /* Safari fallback */
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Header Cells */
.responsive-grid .grid-header {
    -webkit-flex: 1;
    flex: 1;
    padding: 0.5rem;
    text-align: left;
    background: #f5f5f5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Mobile Stacked Layout */
@media (max-width: 768px) {
    .responsive-grid .grid-row {
        -webkit-flex-direction: column;
        flex-direction: column;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
    }

    .responsive-grid .grid-cell {
        position: relative;
        padding-left: 50%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .responsive-grid .grid-cell:before {
        content: attr(data-header);
        position: absolute;
        left: 0;
        width: 50%;
        padding: 0.5rem;
        font-weight: bold;
        background: #f0f0f0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

2. Verify ASP.NET GridView Markup & Code-Behind #

Make sure your GridView is properly outputting the data-header attribute (critical for the mobile stacked view) and applying the correct CSS classes. Double-check your RowDataBound event handler:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Add data-header and grid-cell class to each data cell
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].Attributes.Add("data-header", GridView1.HeaderRow.Cells[i].Text);
            e.Row.Cells[i].CssClass = "grid-cell";
        }
        // Add grid-row class to each data row
        e.Row.CssClass = "grid-row";
    }
    else if (e.Row.RowType == DataControlRowType.Header)
    {
        // Add grid-header class to each header cell
        foreach (TableCell cell in e.Row.Cells)
        {
            cell.CssClass = "grid-header";
        }
        // Add responsive-grid class to the header row container
        e.Row.Parent.CssClass = "responsive-grid";
    }
}

3. Additional Safari Tweaks #

• Ensure HTML5 Doctype: Start your page with <!DOCTYPE html> to avoid Safari’s quirks mode, which can break modern CSS layouts.
• Text Wrapping Fix: If content is overflowing cells, add these properties to prevent horizontal scrolling:

  .grid-cell {
      word-wrap: break-word;
      -webkit-hyphens: auto;
      hyphens: auto;
  }
  

• Overflow Handling: If you’re using overflow: hidden, add -webkit-overflow-scrolling: touch; for smooth mobile scrolling.

Next Steps #

Try applying these changes first. If the issue persists, share more details about the specific rendering problem (e.g., cells overlapping, headers missing, content cut off) and your exact Safari version—this will help narrow down the root cause faster.

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