CSS работает в текущей версии Safari только тогда, когда я быстро справляюсь с мышью
У меня есть меню CSS для сайта, над которым я работаю. Я настроил его так, что он делает именно то, что я хочу, в Firefox, Chrome и старой версии Safari. Однако в новейшей версии Safari (6.0.2 на Lion) происходит нечто странное. Если я позволю странице полностью загрузиться, а затем наведусь на меню, функциональность меню не будет работать. Однако, если я наведу курсор мыши на меню во время загрузки страницы, он будет работать просто отлично! Это сводило меня с ума, пока я не понял схему. Ну, это все еще сводит меня с ума, я полагаю. Это ошибочное поведение, похоже, влияет только на новейший Safari, и я не могу понять, как это исправить. Я пытался закомментировать другие CSS-файлы, которые, по моему мнению, могут конфликтовать с ним. Проблема, вероятно, связана с тем, что я использую iWeb для генерации исходного HTML, а затем я редактирую HTML, чтобы добавить меню, и редактирую CSS, чтобы добавить функции и стили меню.
Я активно работаю над кодом, поэтому эта страница, скорее всего, изменится, но вот страница, с которой у меня проблемы (с моими правками). Обратите внимание, что для многих пунктов меню еще не созданы страницы для них:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About.html
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head><link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
<meta name="viewport" content="width=960" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="iWeb 3.0.4" />
<meta name="iWeb-Build" content="local-build-20130209" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=960" />
<title>About</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="About_files/About.css" />
<!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='About_files/AboutIE.css'/><![endif]-->
<!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
<style type="text/css">
/*<![CDATA[*/
@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"> </script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="About_files/About.js"></script>
</head>
<body style="background: rgb(125, 133, 135); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: rgb(165, 183, 156); text-align: left; width: 960px; " id="body_content">
<div style="float: left; margin-left: 0px; position: relative; width: 960px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 960px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 11px; width: 648px; height: 0px; left: 272px; position: absolute; top: 81px; width: 648px; z-index: 1; " class="tinyText shadow_0">
<div style="position: relative; width: 648px; ">
<img src="About_files/shapeimage_1.jpg" alt="" style="height: 11px; left: 0px; margin-top: -5px; position: absolute; top: 0px; width: 648px; " />
</div>
</div>
<div style="height: 245px; width: 199px; height: 245px; left: 41px; position: absolute; top: 639px; width: 199px; z-index: 1; " class="tinyText style_SkipStroke stroke_0" id="id1">
<img src="About_files/spiralonly.png" alt="" style="border: none; height: 245px; width: 200px; " />
</div>
<div style="height: 437px; width: 356px; height: 437px; left: 582px; position: absolute; top: 77px; width: 356px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 356px; ">
<img src="About_files/shapeimage_2.png" alt="" style="height: 437px; left: 0px; position: absolute; top: 0px; width: 356px; " />
</div>
</div>
<div style="height: 50px; width: 462px; height: 50px; left: 504px; position: absolute; top: 922px; width: 462px; z-index: 1; " class="tinyText style_SkipStrokeSkipFillSkipOpacity shadow_1">
<div style="position: relative; width: 462px; "></div>
</div>
<div id="id2" style="height: 371px; left: 0px; position: absolute; top: 898px; width: 960px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_shape_layout_style_default_External_960_371" style="padding: 0px; ">
<div class="graphic_shape_layout_style_default"></div>
</div>
</div>
<div class="tinyText" style="height: 75px; left: 589px; position: absolute; top: 901px; width: 364px; z-index: 1; ">
<img usemap="#map1" id="shapeimage_3" src="About_files/shapeimage_3.png" style="border: none; height: 82px; left: -6px; position: absolute; top: -4px; width: 374px; z-index: 1; " alt="brought to you by SwingBuffalo.com winner of Buffalo Spree’s 2011 “Best Dance Lessons”" title="" /><map name="map1" id="map1"><area href="http://SwingBuffalo.com/" title="http://SwingBuffalo.com/" onmouseover="IMmouseover('shapeimage_3', '0');" alt="http://SwingBuffalo.com/" onmouseout="IMmouseout('shapeimage_3', '0');" shape="rect" coords="252, 8, 366, 28" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" /></map><img style="height: 20px; left: 246px; position: absolute; top: 4px; width: 114px; " id="shapeimage_3_link_0" alt="shapeimage_3_link_0" src="About_files/shapeimage_3_link_0.png" />
</div>
<div style="height: 164px; width: 164px; height: 164px; left: 57px; position: absolute; top: 4px; width: 164px; z-index: 1; " class="tinyText style_SkipStroke_2 stroke_0">
<a href="Home.html" title="Home.html"><img src="About_files/RS_Logo_small.png" alt="" style="border: none; height: 164px; width: 164px; " /></a>
</div>
<div style="height: 7px; width: 969px; height: 0px; left: -4px; position: absolute; top: 880px; width: 969px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 969px; ">
<img src="About_files/shapeimage_4.jpg" alt="" style="height: 7px; left: 0px; margin-top: -3px; position: absolute; top: 0px; width: 969px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 344px; left: 15px; opacity: 1.00; position: absolute; top: 906px; width: 607px; z-index: 1; ">
<script type="text/javascript"><!--//--><![CDATA[//><!--
var widget0_htmlMarkupURL = ".//About_files/widget0_markup.html";//--><!]]></script>
<div id="widget0-htmlRegion" class="html_region_widget"></div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});//--><!]]></script>
<div id="id3" style="height: 649px; left: 63px; position: absolute; top: 195px; width: 835px; z-index: 1; " class="style_SkipStroke_3 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_835_649" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style">Rhythm Shuffle 2013 is <a class="class1" title="http://SwingBuffalo.com/" href="http://SwingBuffalo.com/">Swing Buffalo’s</a> sixth annual swing dance workshop. Our goal is to spread the pure fun and enjoyment of historical forms of swing dance known as <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/lindy_hop/" href="http://www.lindycircle.com/history/lindy_hop/" onkeypress="window.open(this.href); return false;">Lindy Hop</a> and <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/balboa/" href="http://www.lindycircle.com/history/balboa/" onkeypress="window.open(this.href); return false;">Balboa</a>, dances straight from the swing era. Each year, we bring in some of the world’s top swing dance <a title="Instructors.html" href="Instructors.html">instructors</a> and hire some of the greatest swing bands to attract locals and out of town visitors alike to learn and dance with one another.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">By signing up, you will enjoy a weekend of thoughtful learning from helpful, non-threatening, and down to earth <a title="Instructors.html" href="Instructors.html">instructors</a>; dances like they had in the old days that are full of energy, improvisation, and playfulness; bands that will take you back to the 20’s, <span class="style">30</span>’s, and 40’s; blues parties; and DJ’s that’ll make you get up on your feet and onto the dance floor.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">We will also have a vintage vendors on hand for you to shop for the perfect swing attire so you can go to get your <a title="http://LindyFix.com/" href="http://LindyFix.com/">Lindy Fix</a> in style. Sit down to a Sunday lunch with a historical roundtable discussion on a swing-era topic. This year's topic is the Crystal Ballroom and the ships, the Americana and Canadiana (with dance floors) which brought dancers there.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">Each year, our workshop gets bigger and better. Swing Buffalo, as a community organization, works hard to provide the best experience possible at the cheapest price possible. As a community, we work hard all year round to make this event something we can be proud of. In doing so, we hope to inspire and excite you and show you how much better the world could be if we all just learned to swing out.<br /></p>
<p class="paragraph_style"><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style">- The Rhythm Shuffle Team</p>
</div>
</div>
</div>
<div style="height: 65px; width: 232px; height: 65px; left: 668px; position: absolute; top: 125px; width: 232px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 232px; ">
<img src="About_files/shapeimage_5.png" alt="About" style="height: 33px; left: 0px; margin-left: 118px; margin-top: 17px; position: absolute; top: 0px; width: 109px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 186px; left: 228px; opacity: 1.00; position: absolute; top: 1px; width: 731px; z-index: 1; ">
<blockquote><div id='cssmenu'>
<ul>
<li class='has-sub'><a href='About.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">About</span></a>
<ul>
<li><a href='About.html'><span style="font-family: 'Oswald'; font-size:18px;">About Rhythm Shuffle</span></a></li>
<li><a href='Balboa.html'><span style="font-family: 'Oswald'; font-size:18px;">About Balboa</span></a></li>
<li><a href='LindyHop.html'><span style="font-family: 'Oswald'; font-size:18px;">About Lindy Hop</span></a></li>
<li><a href='Competitions.html'><span style="font-family: 'Oswald'; font-size:18px;">Competitions</span></a></li>
<li><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
<li><a href='Music.html'><span style="font-family: 'Oswald'; font-size:18px;">Music</span></a></li>
<li class='has-sub'><a href='#'><span style="font-family: 'Oswald'; font-size:18px;">Previous Years</span></a>
<ul>
<li><a href='/2012/'><span style="font-family: 'Oswald'; font-size:18px;">2012</span></a></li>
<li><a href='/2011/'><span style="font-family: 'Oswald'; font-size:18px;">2011</span></a></li>
<li><a href='/2010/'><span style="font-family: 'Oswald'; font-size:18px;">2010</span></a></li>
<li><a href='/2009/'><span style="font-family: 'Oswald'; font-size:18px;">2009</span></a></li>
<li class='last'><a href='/2008/'><span style="font-family: 'Oswald'; font-size:18px;">2008</span></a></li>
</ul>
</li>
<li><a href='Pricing.html'><span style="font-family: 'Oswald'; font-size:18px;">Pricing</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li><a href='Vendors.html'><span style="font-family: 'Oswald'; font-size:18px;">Vendors</span></a></li>
<li class='last'><a href='Venues.html'><span style="font-family: 'Oswald'; font-size:18px;">Venues</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Classes.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Classes</span></a>
<ul>
<li><a href='Classes.html'><span style="font-family: 'Oswald'; font-size:18px;">Dance Classes</span></a></li>
<li><a href='Talk.html'><span style="font-family: 'Oswald'; font-size:18px;">Panel Discussion</span></a></li>
<li><a href='Instructors.html'><span style="font-family: 'Oswald'; font-size:18px;">Instructors</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li class='last'><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Dances.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Dances</span></a>
<ul>
<li><a href='Dances.html'><span style="font-family: 'Oswald'; font-size:18px;">Social Dances</span></a></li>
<li><a href='Competitions.html'><span style="font-family: 'Oswald'; font-size:18px";>Competitions</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li class='last'><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Register.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Register</span></a>
<ul>
<li><a href='Register.html'><span style="font-family: 'Oswald'; font-size:18px;">Register</span></a></li>
<li><a href='Housing.html'><span style="font-family: 'Oswald'; font-size:18px;">Housing</span></a></li>
<li><a href='Pricing.html'><span style="font-family: 'Oswald'; font-size:18px;">Pricing</span></a></li>
<li class='last'><a href='Discounts.html'><span style="font-family: 'Oswald'; font-size:18px;">Discounts</span></a></li>
</ul>
</li>
<li class='last'><a href='Contact.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Contact</span></a></li>
</ul>
</div>
</blockquote>
</div>
<div style="height: 1270px; line-height: 1270px; " class="spacer"> </div>
</div>
<div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>
и вот CSS с моими правками:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About_files/About.css
.style_SkipStroke_2 {
background: transparent;
opacity: 1.00;
}
.paragraph_style {
color: rgb(242, 234, 196);
font-family: 'TrebuchetMS', 'Trebuchet MS', sans-serif;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 25px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: justify;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.style {
color: rgb(247, 239, 202);
line-height: 25px;
opacity: 1.00;
}
.style_SkipStroke_3 {
background: transparent;
opacity: 1.00;
}
.style_SkipStrokeSkipFillSkipOpacity {
}
.style_SkipStroke {
background: transparent;
opacity: 0.25;
}
.style_SkipStroke_1 {
background: transparent url(backgroundimage_1.jpg) no-repeat scroll center center;
opacity: 1.00;
}
.Body {
color: rgb(88, 77, 77);
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 15px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.graphic_image_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_shape_layout_style_default_External_960_371 {
position: relative;
}
.graphic_shape_layout_style_default {
padding: 4px;
}
.graphic_shape_style_default_SkipStroke {
background: rgb(255, 255, 255);
opacity: 1.00;
}
.graphic_textbox_layout_style_default_External_835_649 {
position: relative;
}
.graphic_textbox_layout_style_default {
padding: 4px;
}
.graphic_textbox_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_textbox_style_default_SkipStrokeSkipFillSkipOpacity {
}
a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1 {
color: rgb(255, 234, 173);
}
a.class1:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget0 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
z-index: 1;
}
#widget0 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
#widget0 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget1 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
.spacer {
font-size: 1px;
line-height: 1px;
}
.bumper {
font-size: 1px;
line-height: 1px;
}
body {
-webkit-text-size-adjust: none;
}
div {
overflow: visible;
}
img {
border: none;
}
.InlineBlock {
display: inline;
}
.InlineBlock {
display: inline-block;
}
.inline-block {
display: inline-block;
vertical-align: baseline;
margin-bottom:0.3em;
}
.inline-block.shape-with-text {
vertical-align: bottom;
}
.vertical-align-middle-middlebox {
display: table;
}
.vertical-align-middle-innerbox {
display: table-cell;
vertical-align: middle;
}
div.paragraph {
position: relative;
}
li.full-width {
width: 100;
}
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu a:visited { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu a:visited {text-decoration: none;}
#cssmenu {height: 70px; background-color: transparent; /*box-shadow: 0px 2px 3px rgba(0,0,0,.4);*/}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:visited {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: rgb(255,255,221); text-decoration: none;}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(242,234,200) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:visited {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(255,255,221);}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
text-decoration: none;
background-color: rgb(0,34,60);
color: rgb(242,234,200);
}
Если кто-то использует Safari 6 на Lion, дайте мне знать, если у вас есть поведение, которое я описываю. Несмотря на то, что я очищаю свои кеши, мне трудно поверить в то, что я вижу...
Спасибо роб
ОБНОВЛЕНИЕ: Виш подумал, что это может быть один из javascripts, поэтому я попытался закомментировать ссылку в шапке, которая ссылалась на него, и меню начали работать в новейшей версии Safari! Вопросы: почему? (и) Что еще я могу сломать, просто удалив ссылку на скрипт? Вот сценарий, который кажется виновником:
// Created by iWeb 3.0.4 local-build-20130210
setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({stroke_0:new IWEmptyStroke(),shadow_0:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000}),shadow_1:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000})});registry.applyEffects();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('About_files/AboutMoz.css')
adjustLineHeightIfTooBig('id2');adjustFontSizeIfTooBig('id2');detectBrowser();adjustLineHeightIfTooBig('id3');adjustFontSizeIfTooBig('id3');fixAllIEPNGs('Media/transparent.gif');fixupIECSS3Opacity('id1');fixupAllIEPNGBGs();IMpreload('About_files','shapeimage_3','0');Widget.onload();applyEffects()}
function onPageUnload()
{Widget.onunload();}
Хорошо, я понял, что это вызов функции applyEffects(). Кто-нибудь знает, что это должно управлять, чтобы я знал, что я делаю, когда вынимаю это?
1 ответ
Решение
Я не уверен, какое поведение вы тоже имеете в виду в Safari 6. Я открыл вышеупомянутый HTML-файл в Safari и после загрузки страницы увидел задержку при наведении курсора мыши. Я вижу только эту задержку в Safari. После тщательного изучения вашего html и css я обнаружил, что проблема связана со следующими строками кода.
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
При использовании непрозрачности и видимости вы должны быть осторожны, поскольку непрозрачность визуализирует элемент с задержкой, для достижения непрозрачности от 0 до 100% может потребоваться задержка в несколько мс. А с другой стороны, видимость выпадающего меню мгновенно меняется, как будто он показывает переключатель включения / выключения. Я бы порекомендовал вам отключить один или посмотреть на файл скрипта, чтобы добавить тайм-аут, чтобы компенсировать задержку видимости.