0

作業中のWebサイトのCSSメニューがあります。Firefox、Chrome、および古いバージョンのSafariで実行したいことを正確に実行できるように調整しました。ただし、Safariの最新バージョン(Lionでは6.0.2)では、何か奇妙なことが起こります。ページを完全にロードしてからメニューにカーソルを合わせると、メニュー機能が機能しません。ただし、ページの読み込み中にメニューにカーソルを合わせると、問題なく機能します。パターンを理解するまで、これは私を夢中にさせていました。まあ、それはまだ私を夢中にさせていると思います。この誤った動作は最新のSafariにのみ影響するようで、修正方法がわかりません。競合している可能性があると思われる他の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&#10;winner of Buffalo Spree’s 2011&#10;“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);
}

誰かがLionでSafari6を使用している場合は、私が説明する動作をしている場合はお知らせください。キャッシュを空にしているのに、自分が見ているものを信じるのに苦労しています…</ p>

ありがとう、ロブ

更新:Vishはそれがjavascriptの1つである可能性があると考えたので、それにリンクしているヘッダーのリンクをコメントアウトしてみたところ、メニューは最新バージョンの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()」関数呼び出しであることがわかりました。誰かがこれが何を支配することになっているのか知っているので、私がそれを取り出すときに私が何をしているのか知っていますか?

4

1 に答える 1

0

Safari 6でも正確にどのような動作を参照しているかわかりません。Safariで上記のhtmlファイルを開いたところ、ページが読み込まれた後、マウスのホバーで遅延が発生しました。この遅延はSafariでのみ表示されます。HTMLとCSSを詳しく調べたところ、問題は次のコード行に関係していることがわかりました。

#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;

不透明度と可視性の両方を使用する場合、不透明度は要素に遅れを与えるため、注意する必要があります。不透明度が0から100%に達するには、数ミリ秒の遅延が必要になる場合があります。一方、ドロップダウンメニューの表示は、オン/オフスイッチの表示のように瞬時に変化します。1つを無効にするか、スクリプトファイルを調べてタイムアウトを追加し、可視性の遅延を相殺することをお勧めします。

于 2013-02-09T21:09:40.963 に答える