Связь вокруг пролета встроенного блока и Internet Explorer - PullRequest
Новая
       1

Связь вокруг пролета встроенного блока и Internet Explorer

1 голос
/ 25 января 2011

Следующее прекрасно работает в Chrome и Firefox и делает контейнер кликабельным.В Internet Explorer он тоже активен, но меняет только курсор, чтобы указать это для внутреннего div, но не для span.

. Я могу исправить это с помощью cursor:pointer, но что более важноне позволяет щелкнуть правой кнопкой мыши на новой вкладке.

Есть ли решение этой проблемы?Спасибо! 

<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

Ответы [ 4 ]

1 голос
/ 25 января 2011

Ваш HTML неверен, хотя браузеры делают так, как вы ожидаете, это никогда не будет проверено.

Что касается интерактивного div, вы можете использовать jQuery, чтобы делать то, что вы хотите: 

$(function (){
    $("#clickme").click(function(event) {
        event.preventDefault();
        window.open('http://www.whatever.com');
    });
});

Пример для вас здесь .

0 голосов
/ 25 января 2011

Вот как я реализую кликабельный баннер для заголовка. Если фоновое изображение больше, чем ссылка h1, следующие абзацы будут отображаться с наложением баннера. Я думаю, это то, что вы пытаетесь достичь. 

<!DOCTYPE html>
<html>
  <head>
    <title>Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('header_banner.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* to hide the text that would show */
                            /* over the banner */
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">This is a header link.</a></h1>
      <p>Here is some text.</p><p>Here is some more text.</p>
    </div>
  </body>
</html>

Это проверяется как html5 и дает вам гораздо больше гибкости. У вас может быть баннер заголовка, который все еще содержит ссылки, и может иметь любое количество других элементов в области заголовка - даже другие ссылки.

0 голосов
/ 25 января 2011

Недопустимо иметь элемент уровня блока внутри элемента встроенного уровня.

Однако, по крайней мере, в IE8 вы можете решить свою проблему, указав странице тип документа.Я использовал тип документа html5, но, возможно, он работает и с другими: 

<!doctype html>
<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

Кстати, в html5 допустимо использовать тег a, как вы.

0 голосов
/ 25 января 2011

IE (по крайней мере, 6, я не уверен в новых версиях) не поддерживает inline-block для элементов, которые изначально встроены, такие как span.Попробуйте вместо этого использовать блочные элементы.

Кстати, если вы не создаете HTML5, блочные элементы недопустимы внутри a элементов.Это может привести к проблемам в браузерах, которые его еще не поддерживают.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...