Question

我希望有一个固定大小和圆角的居中DIV，其中包括一个可滚动的表格。这是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scripts/jquery.jscrollpane.min.js"></script>
    <script type="text/javascript" src="scripts/mwheelIntent.js"></script>
    <style>
        table.internal
        {
            height: 100%;
            width: 100%;
            background-color: Fuchsia;
        }
        div.scroll-pane
        {
            position: fixed;
            top:50px;
            left:50px;
            right:50px;
            bottom:50px;
            background-color: transparent;
            border-top-left-radius: 10px 12px;
            border-top-right-radius: 16px 14px;;
            border-bottom-right-radius: 18px 12px;
            border-bottom-left-radius: 11px 12px;
            -moz-border-radius-topleft:10px 12px;
            -moz-border-radius-topright: 16px 14px;
            -moz-border-radius-bottomright: 18px 12px;
            -moz-border-radius-bottomleft: 11px 12px;
            -webkit-border-top-left-radius: 10px 12px;
            -webkit-border-top-right-radius: 16px 14px;
            -webkit-border-bottom-right-radius: 18px 12px;
            -webkit-border-bottom-left-radius: 11px 12px;
        }
    </style>
    <script>
    function HandleScrollbars()
                {
                    $('#pane').jScrollPane({ showArrows: true, verticalGutter: 0});
                }
    </script>
</head>
<body style="background-color: Blue;" onload="HandleScrollbars();">
    <div id="pane" class="scroll-pane">
        <table class="internal" cellspacing="0">
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

在FireFox 5中看起来不错。

enter image description here

但在Safari 5中，角落并非圆润！为什么？（不要注意Comic Serif，它是调试布局的默认Safari字体）。

enter image description here

具有圆角，固定大小和可滚动内容的DIV（jScrollPane）

0 个答案: