앵커 링크 내부의 버튼은 Firefox에서 작동하지만 Internet Explorer에서는 작동하지 않습니까?

앵커 링크 내부의 버튼은 Firefox에서 작동하지만 Internet Explorer에서는 작동하지 않습니까?

---

내 사이트의 다른 모든 것은 내 링크를 제외한 모든 브라우저와 호환되는 것 같습니다. 페이지에 나타나지만 작동하지 않습니다. 링크에 대한 내 코드는 다음과 같습니다.

<td bgcolor="#ffffff" height="370" valign="top" width="165">
    <p>
        <a href="sc3.html">
            <button style="width:120;height:25">Super Chem #3</button>
        </a> 
        <a href="91hollywood.html">
            <button style="width:120;height:25">91 Hollywood</button>
        </a> 
        <a href="sbubba.html">
            <button style="width:120;height:25">Super Bubba</button>
        </a> 
        <a href="afgoohash.html">
            <button style="width:120;height:25">Afgoo Hash</button>
        </a> 
        <a href="superjack.html">
            <button style="width:120;height:25">Super Jack</button>
        </a> 
        <a href="sog.html">
            <button style="width:120;height:25">Sugar OG</button>
        </a> 
        <a href="91pk91.html">
            <button style="width:120;height:25">91 x PK</button>
        </a> 
        <a href="jedi1.html">
            <button style="width:120;height:25">Jedi</button>
        </a>
    </p>
    <p>&nbsp;</p>
    <a href="http://indynile99.blogspot.com">
        <button style="width:120;height:25">Blog</button>
    </a>
    <p>&nbsp;</p>
</td>

---

요소 <button>내부에 있을 수 없습니다 <a>. 로 W3의 컨텐츠 모델 설명 에 대한 <a>요소 상태 :

"대화 형 콘텐츠 하위 항목이 없어야합니다."

(a <button>는 양방향 콘텐츠 로 간주 됩니다. )

원하는 효과를 얻으려면 <a>태그를 버리고 각 버튼에 간단한 이벤트 핸들러를 추가하여 브라우저를 원하는 위치로 이동합니다.

<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />

고려하시기 바랍니다 하지 그러나,이 일을; 일반 링크가 작동하는 이유가 있습니다.

• 사용자는 링크를 즉시 인식하고 다른 페이지로 이동한다는 것을 이해할 수 있습니다.
• 검색 엔진은 링크로 식별하고 따라갈 수 있습니다.
• 스크린 리더는이를 링크로 식별하고 사용자에게 적절하게 조언 할 수 있습니다.

또한 기본 탐색을 수행하기 위해 JavaScript를 활성화하는 완전히 불필요한 요구 사항을 추가합니다. 이것은 웹의 근본적인 측면이므로 이러한 의존성을 용납 할 수 없다고 생각합니다.

배경 이미지 나 배경 색상, 테두리와 다른 기술을 사용하여, 원하는 경우 그들은 그래서, 당신의 연결 스타일을 지정할 수 있습니다 보면 버튼처럼,하지만 내부적으로, 그들은 보통 링크해야합니다.

---

참고 :
W3C는 링크 태그 내부의 버튼에 문제가 없으므로 다른 MS 하위 표준 일뿐입니다.

답변 :
전체 이미지를 원하지 않는 한 대리 버튼을 사용하십시오.

대리 버튼을 태그에 넣을 수 있습니다 (div가 아닌 스팬을 사용하는 경우 더 안전함).

버튼처럼 보이도록 스타일을 지정할 수 있습니다.

그것은 다재다능합니다-하나의 CSS 코드가 모든 인스턴스를 지원합니다-CSS를 한 번 정의하고 그 시점에서 코드가 필요한 곳에 html 인스턴스를 복사하여 붙여 넣기 만하면됩니다.

모든 버튼은 고유 한 레이블을 가질 수 있습니다. 다국어 페이지에 적합합니다 (모든 언어에 대해 그림을 그리는 것이 더 쉬움). 또한 스크립트 전체에 인스턴스를 더 쉽게 전파 할 수 있습니다.

너비를 레이블 길이로 조정합니다. 원하는대로 고정 된 너비도 사용합니다.
IE7은 위의 예외입니다. 너비가 있어야합니다. 또는이 버튼을 가장자리에서 가장자리로 만들어야합니다. 또는 너비를 지정하는 대신 왼쪽으로 부동 버튼을 사용할 수 있습니다
. IE7의 경우 CSS :
ㅏ. .width : 150px; (속성 앞에 점을 적어 두십시오. 일반적으로 점을 추가하여 IE7을 타겟팅합니다. 점을 제거하면 모든 브라우저에서 속성을 읽습니다
. ) b. 텍스트 정렬 : 중앙; -너비가 고정 된 경우 텍스트 / 레이블을 가운데에 배치해야합니다
. c. 커서 : 포인터; -링크 포인터를 올바르게 표시하려면 모든 IE에이 기능이 있어야합니다.-좋은 브라우저는 필요하지 않습니다 .

이미지를 사용하는 대신이 코드를 사용하여 CSS3를 사용하여 스타일을 지정할 수 있습니다.
a. 둥근 모서리의 반경 (제한 : IE에서 사각형으로 표시)
b. "버튼 모양"으로 만들기위한 그래디언트 (제한 : 오페라는 그래디언트를 지원하지 않으므로이 브라우저의 표준 배경색을 설정하는 것을 잊지 마십시오)
씨. : hover pclass를 사용하여 마우스 포인터 위치 등에 따라 버튼 상태를 변경합니다.-텍스트 레이블에만 적용하거나 전체 버튼에 적용 할 수 있습니다.

아래 CSS 코드 :

.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; }

.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; }

.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }

아래 HTML 코드 (버튼 인스턴스) :

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>

---

$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed

---

아래 코드는 모든 브라우저에서 잘 작동합니다.

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>

---

a태그 안에 버튼이있을 수 없습니다 . 그러나 자바 스크립트를 사용하여 작동시킬 수 있습니다.

---

Twitter 부트 스트랩과 같은 프레임 워크를 사용하는 경우 태그에 "btn"클래스를 간단히 추가 할 수 있습니다.이 문제에 대해 사용자 호출을 받았는데, 내부에 버튼이 있었기 때문에 체크 아웃 버튼이 작동하지 않았던 것 같습니다. 태그 ... 대신에 btn 클래스를 추가했는데 이제는 완벽하게 작동합니다. 큰 실수, 아마도 고객에게 비용이 듭니다. 가끔 모든 것이 IE에서 작동하는지 확인하는 코드를 잊어 버리는 경우도 있습니다.

예 <a href="link.com" class="btn" >Checkout</a>

---

i found that this works for me

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">

---

Since this is only an issue in IE, to resolve this, I'm first detecting if the browser is IE and if so, use a jquery click event. I put this code into a global file so it's fixed throughout the site.

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

This way we only have the overhead of assigning click events to linked input buttons for IE. note: The above code is inside a document ready function to make sure the page is completely loaded before assigning click events.

I also assigned class names to my input buttons to save some overhead when using IE so I can search for

$('a input.button')

instead of

$('a input[type=button]')

.

<a href="some_link"><input type="button" class="button" value="some value" /></a>

On top of all that, I'm also utilizing CSS to make the buttons look clickable when your mouse hovers over it:

input.button {cursor: pointer}

---

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

This is works just fine I had tested it on IE9.

---

The problem here is that the link sits behind the button, even when changing the z-index. This markup is also invalid (read the spec). So the reason the links dont work is because you are actually clicking the button and not the link. The solution is to change your markup around.

<button type="button"><a href="yourlink">Link</a></button>

Then style as needed. A demo is here.

---

This is very simple actually, no javascript required.

First, put the anchor inside the button

<button><a href="#">Bar</a></button>

Then, turn the anchor tag into a block type element and fill its container

button a {
  display:block;
  height:100%;
  width:100%;
}

Finally, add other styles as necessary.

---

just insert this jquery code to your HTML's head section:

<!--[if lt IE 9 ]>
     <script>
        $(document).ready(function(){
            $('a > button').click(function(){
                window.location.href = $(this).parent().attr('href');
            });
        });
    </script>
<![endif]-->

---

Why not just convert all <button> to <span> with type="button" and then style with your normal css button classes? Just confirmed that this works in IE11.

참고URL : https://stackoverflow.com/questions/802839/button-inside-of-anchor-link-works-in-firefox-but-not-in-internet-explorer