替换响应表以获得更好的标记和可访问性

Question

我正在尝试创建 a site with a set of images 可以通过垂直滚动页面或单击使用锚标记链接到图像集中下一张图像的按钮来查看。

图像在响应浏览器大小的容器内垂直和水平居中 window。

<a id="1">

    <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
    <tr valign="middle"><td align="center">

        <img src="image.png">

    </td></tr>
    <tr><td>

        <a href="#2">Down</a>

    </td></tr>
    </table>

</a>

我知道除了使用表格之外没有其他方法可以实现此目的，尽管我知道这是非常糟糕的标记。

我还发现该站点在 Firefox 16.0.2 中可以正确呈现，但在 Safari 5.0.6 中不能正确呈现，因为在集合中的第二张图片之后，表格的高度似乎呈指数增长。

如何为该网站编写代码以获得更好的可访问性和正确的标记？

Answer 1

在不诉诸太多技巧的情况下，我可能会采用的方法是将每个图像放在 div 中，根据 css 设置一些尺寸，然后使用 javascript 进行相应调整。这是示例 HTML:

div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>
<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
</div>

样本CSS:

html {height:100%;}
body {height:100%;}

div.item {
    width:100%;
    height:100%;
    text-align:center;
}

div.item > img {
    max-height:100%;
    max-width:100%;
}

最后是 jquery，它只是在调整大小和开始时重新调整大小。

$(document).ready(function(){
    //Setup function for sizing.
    var win = $(window), body = $('body');
    var els = $('div.item');
    function DoResize() {
        var height = win.height(), 
        width = body.width();
        els.each(function(i,el){
            var ele = $(el);
            ele.height(height).width(width);
            var img = ele.find('img');
            var difference = (height - img.height())/2.0;
            img.css('margin-top',difference+'px');
        });
    }
    
    DoResize();
    $(window).on('resize', DoResize);
});

我设置了一个jsfiddle for you to see it in action. It also readjusts for resizing of the window. It should work in most browsers even IE7 according to caniuse.com.

更新：

要包含字幕等，您可以做很多事情。最简单的方法是为每个项目添加相对定位，然后为要相对于每个图像定位的每个元素添加绝对定位。

您或多或少会像这样 html：

<div class="item">
    <img src="http://www.focus-itoutsourcing.com/wp-content/uploads/2013/10/Software-testing-trends-2013.jpg" />
    <div class="caption">
        Caption for Item 1
    </div>
    <div class="link">
        <a href="javascript:alert('Woo #1');">Item link</a>
    </div>
</div>

然后样式将只更新父 div 中的另一个类。

我在这里更新了 jsfiddle 以向您展示一些您可以做的事情：link

再次更新：

将以下脚本标记添加到您的页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

在调整大小脚本之前。

Answer 2

该死的Miltox也把我打败了。不过他的更好。只是说 safari 很奇怪的原因是你将多个 table 设置为 100% 高度，每个都堆叠在一起，所以它们加起来，你应该有一个大的 table。无论如何，Miltox 的回答将解决所有问题。

替换响应表以获得更好的标记和可访问性

Replacing responsive tables for better markup and accessibility

html

javascript

css

jquery

html-table

更新：

再次更新：