Я хочу иметь 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.
Но в Safari 5 углы не закруглены! Зачем? (Не обращайте внимания на Comic Serif, это шрифт Safari по умолчанию для отладки макетов).
