发表新帖
发表新帖

CSS issue on iPad with table border

前端 未结
关注
6 1671
终归单人心
终归单人心 2020-12-28 09:24

I have a CSS problem when the html page is rendered on iPad. Everything works good in other browsers. The problem is that I get a small space between the cells in my tables

相关标签:
6条回答
  • 天涯浪人
    2020-12-28 09:47

    Zheileman's solution worked for me and now my tabs with CSS image backgrounds look correct on iPad. View the top menu tabs on http://www.meishapersonaltrainer.com on an iPad for an example of the fix in action.

    My PHP which performs the detection and adds the META looks like this

    if (isset($_SERVER['HTTP_USER_AGENT']))
{
    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);
    if (strpos($ua, 'ipad') !== false || strpos($ua, 'ipod') !== false ||strpos($ua, 'iphone') !== false)
    {
        print '<meta content="width=device-width; initial-scale=1.0;" name="viewport" />';
    }
}
    0 讨论(0)
  • 失恋的感觉
    2020-12-28 09:47

    I solved this in a weird way.

    First up I added a <div> inside of every cell which was experiencing this issue, if there is content in the cell then make sure the <div> is after it and does not wrap the content. I then applied the class ios-table-fix to the <div> and ios-table to any of the table cells (<td>).

    Then I wrote some CSS inside of media queries which target the iPad's screen resolution. First up I added the following to ios-table:

    overflow: hidden;
position: relative;

    Next I added the following to the ios-table-fix:

    bottom: -1px;
left: -1px;
position: absolute;
right: -1px;
top: -1px;
z-index: 1;

    You're going to want to apply position: relative; and z-index: 2; to any content inside of the table cells, otherwise they will disappear.

    This effectively draws a new background for the table cell which overflows the border issue without changing the size of the table cell. Since it's only an iPad issue we can use CSS in the <head> tag to avoid affecting everything.

    I only tested this briefly but it seems to work without causing issues elsewhere.

    0 讨论(0)
  • 心在旅途
    2020-12-28 09:54

    I just bashed my head against this bug for half a day while trying to make an HTML formatted email.

    iPad's have a bug (gasp!) when viewing tables at a non 1:1 scale. This is especially apparent if your table's TD tags have a dark background and the TABLE's parent has a light color. Rowspans and colspans amplify the problem.

    I initially thought the problem was that iPad was introducing a border.
    The real problem is that the coders at Apple didn't decide if they were going to uniformly round fractions of a pixel up, or down while scaling.

    Hence, some TD tags appear to have a border when not at 100% scale. When in reality it is just the light background showing through.

    The solution is to wrap the table into another table that has the same dark background.

    Welcome to 1998 web-design. I hear mp3.com is all the rage. Gonna buy me some mail-order dog treats from pets.com.

    Thanks iPad.

    0 讨论(0)
  • 终归单人心
    2020-12-28 09:58

    This is a general practice of managing table styles on the web, and that should fix your issue:

    table { border-collapse: collapse; }

    And you may remove the margin settings for your table cells, they do not affect anything.

    0 讨论(0)
  • 执笔经年
    2020-12-28 10:00

    I was able to fix it putting this meta tag in the html head when an iDevice (iPod, iPad, iPhone) is detected in the request.

    <meta content='width=device-width; initial-scale=1.0;' name='viewport' />

    Hope it helps.

    0 讨论(0)
  • 耶瑟儿～
    2020-12-28 10:02

    Eureka! I found a solution that worked for me.

    I had a light grey background and this seemed to be the color that was revealed as borders around my tables which were a darker color.

    To fix it you have to place all tags which are affected by the borders revealing themselves into another table the same colour.

    This worked after trying so many things. hope this helps

    0 讨论(0)
 看不清?
提交回复
热议问题