2013-11-04 3 views
2

모바일 버전의 기존 사이트에서 작업하고있어 메뉴의 링크로 문제를 해결할 수 없습니다.
문제는 재고 안드로이드 브라우저에서만 발생합니다. 크롬, 파이어 폭스, 사파리, 심지어 IE 사이트에서도 잘 작동합니다. 사이트의 다른 모든 링크가 잘 작동합니다. 테스트를 원할 경우 사이트 링크 -> www.antiqpalace.com입니다.재고 관련 안드로이드 브라우저에서 링크 문제가 발생했습니다.

코드 설명 : 원래 사이트는 "주 메뉴"와 "왼쪽 메뉴"를 가지고 있으며 "왼쪽 메뉴"에서 "주 메뉴"로 일부 요소를 이동했습니다. 그런 다음 주 메뉴를 사양으로 다시 디자인하고 display : none으로 숨 깁니다. 메뉴 버튼을 클릭하면 JS가 표시를 변경합니다.

내가 시도하는 것 :

  • 절대에 부모 div의 위치를 ​​변경. 저것은 작동하지 않았다, 중요한 두루 말기 문제점이 있었다.

  • 요소에 JQ. 클릭 이벤트를 추가합니다. 결과는 변경되지 않았습니다. 모든 것은 여전히 ​​Chrome에서 작동하지만 ... 링크는 재고 안드로이드 브라우저에서 취소 할 수 없습니다.

  • 저는 CSS에서> a {background-color : blue}를 추가하여 전화에서 무슨 일이 일어나고 링크가 잘 보이지 않고 positiond 괜찮은지 확인합니다.
  • 내가 봤 거든/링크 및 webkit - 변환 문제가 있지만 내 CSS에서 그 라인이 없어.

HTML :

<div> ---> whit a fix position and display none 
    <ul class="menu" style="height: 644px;"> 
     <li class="first leaf menu-mlid-808"> 
      <a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel 
      </a> 
      <img class="DD_right_arrow" src="[some src]"> 
     </li> 

     <li class="expanded active-trail active menu-mlid-817"> 
      <a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms &amp; Suites 
      </a> 
      <ul class="menu" style="height: auto; top: 70.84px;"> 
       <li class="first leaf menu-mlid-823"> 
        <a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two 
        </a> 
        <img class="DD_right_arrow" src="[some src]"> 
       </li> 
       ..... 
       </ul> 
      <div onclick="show_sub_menu(2)" class="A_DD_submenu"> 
       <img class="DD_right_arrow" src="[some src]"> 
      </div> 
     </li> 
     ..... 
    </ul> 

CSS : 그것은 내 자신의 질문에 응답 할 괜찮아하지만 난 문제를 해결하고 위치를 모르는 경우

ul{ 
     margin:0 1.5%; 
     padding:0; 
     border:none; 
     width:97%; 
     height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/ 
     display:block; 
     float:left; 
     overflow-y:scroll; 
    } 
    ul li, 
    ul li.first { 
     padding:0; 
     margin:0; 
     height:auto; 
     width:100%; 
     background:none; 
     background-color:rgba(196,154,69,1); 
     display:block; 
     float:left; 
     border-bottom:dotted 1px rgb(214,184,124); 
     position:relative; 
     z-index:10000; 
    } 
    ul li a{ 
     width:70%; 
     display:block; 
     font-size:11.5px; 
     font-weight:bold; 
     padding: 23px 7%; 
     text-decoration:none !important; 
     float:left; 
     text-align: left; 
     color: white !important; 
     text-transform: uppercase; 
     font-family: 'Open Sans', sans-serif !important; 
     letter-spacing:2px; 
     line-height: 16px; 
     z-index: 10000000000; 
     position: relative; 
    } 
    ul li ul{ 
     width: 100%; 
     margin: 0; 
     overflow-y: hidden; 
     display:none; 
    } 
    ul li ul li{ 
     background-color:rgb(126,118,104) !important; 
     z-index:1000; 
     margin-bottom: 0 !important; 
    } 

답변

4

나도 몰라 솔루션을 게시 할 수 있습니다.

실제 오류 : 실제 오류는 위치 고정 및 링크 내부 문제입니다. Andriod 브라우저는 링크를 표시하지만 클릭 할 수 없습니다. Visuali 모든 것이 정상적으로 작동하지 않는 것처럼 보입니다.

수정 : 요소의 위치를 ​​static으로 변경하고 com을 추가하여 이전 CSS를 다시 작성합니다.

디자인 문제 : 메뉴가 페이지에 삽입 되었기 때문에 최적의 수정 방법이 아닙니다. 어떤 브라우저가 고정 위치 지정에 문제가 있는지 잘 모르겠습니다. 따라서 CSS 파일에 코드를 추가했습니다. 비슷한 문제가있는 경우 브라우저를 식별하고 해당 브라우저에만 코드를 추가 할 수 있습니다.

다음은이 문제를 해결 한 코드를 추가 한 코드입니다. http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css

+0

이 사이트에 대한 질문에 답변하는 것이 좋습니다. 솔루션을 공유해 주셔서 감사합니다 :) –

관련 문제