|
Вкладки Tabs на javascript, браузер сафари выкаблучивается
#37896823
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
Ссылка на профиль пользователя:
|
Участник
Откуда: scriptjava.net
Сообщения: 576
|
|
Написал вот такие вот вкладки tabs
Везде работают одинаково, за исключением осла (IE), но это отдельная тема
В общем открываю пример в Safari и вижу что бордюр сверху съехал на 1px вниз
В чем может быть дело?
Пример находится тут http://learn.javascript.ru/play/v3ufCb
Код
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>
<style type="text/css">
.tab_block {
margin:15px 30px 15px 30px;
}
.tab_modules {
margin:0px; padding:0px;
padding-bottom:4px;
padding-left:14px;
}
.tab_modules li {
list-style:none;
display:inline;
}
.tab_modules li span {
color:#000000;
padding:4px 14px 4px 14px;
border:1px solid #555555;
text-decoration:none;
background-color:#dddddd;
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-khtml-border-radius:5px 5px 0 0;
box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.1) inset;
z-index:1;
cursor:pointer;
}
.tab_modules li span:hover {
background-color:#ffffff;
}
.tab_modules li span.tab_select {
border-bottom:1px solid #ffffff;
background-color:#ffffff;
}
#tab_content {
border:1px solid #555555;
border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
box-shadow: 0 10px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<script type="text/javascript">
var gettabcontent = function(url,mod,th) {
var tag;
var els=$$s.getelbyclass('tab_modules','ul');
for(var i=0;i<els.length;i++) {
tag=$$s.getelbytag('span',els[i]);
for(var j=0;j<tag.length;j++) {
$$(tag[j],'borderBottom','1px solid #555555').$$('backgroundColor','#dddddd');
}
}
$$(th,'borderBottom','1px solid #ffffff').$$('backgroundColor','#ffffff');
$$('tab_content','<img id="loading_img" src="http://scriptjava.net/img/loading.gif" />');
$$('loading_img').src='http://scriptjava.net/img/loading.gif';
$$a({
url:url,
data:{'mod':mod},
success:function (data) {
$$('tab_content',data);
}
});
}
</script>
<div class="tab_block">
<ul class="tab_modules">
<li><span onclick="gettabcontent('http://','index',this);" class="tab_select">Главная</span></li>
<li><span onclick="gettabcontent('http://','settings',this);">Настройки</span></li>
<li><span onclick="gettabcontent('http://','users',this);">Пользователи</span></li>
<li><span onclick="gettabcontent('http://','information',this);">Информация</span></li>
<li><span onclick="gettabcontent('http://','developer',this);">Разработчик</span></li>
</ul>
<div id="tab_content">
123
123
123
123
123
123
123
123
123
123
123
123
123
123
</div>
</div>
</body>
</html>
|
|
|
