如何将锚标记编码为块元素以包含其他块元素

2024-01-18

我遇到了与此描述相同的问题thread https://stackoverflow.com/questions/2191029/firefox-rendering-gone-wrong-see-something-really-weird。我想知道是否有其他方法可以达到相同的结果并避免此问题。

显然,即使锚标记的显示 CSS 属性设置为“块”,Firefox 也会遇到包含块元素的锚标记的问题。我想要实现的效果是让整个块可单击,而不是块中的文本。它还允许将悬停状态应用于整个块而不是链接部分。

谁能建议一种技术

EDIT:

这就是我想要展示的:

<div class="entry ">
    <a class="link" href="/topics/34/steroids">
        <h2>Some Text</h2>
        <div class="info">
             <div class="tag-visualization">
                  <div style="width: 67%;" class="guage"></div>
             </div>
             <ul class="stats">
                  <li>
                       <strong>0</strong><br>FOLLOWERS
                  </li>
                  <li>
                       <strong>2</strong><br>ANSWERS
                  </li>
                  <li>
                       <strong>2</strong><br>QUESTIONS
                  </li>
             </ul>
         </div>
     </a>
</div>

这是 Firefox 渲染的结果:

<div class="entry ">
     <a class="link" href="/topics/45/diet">
     </a><h2><a _moz-rs-heading="" class="link" href="/topi/45/diet">sometext</a></h2>
     <a class="link" href="/topics/45/diet">                        </a><div class="info">
<a class="link" href="/topics/45/diet">                
                            </a><div class="tag-visualization">
<a class="link" href="/topics/45/diet">                                </a><div style="width: 67%;" class="guage"></div>
<a class="link" href="/topics/45/diet">                            </a></div>
<a class="link" href="/topics/45/diet">                            </a><ul class="stats">
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>0</strong><br>FOLLOWERS
                                </a></li>
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>2</strong><br>ANSWERS
                                </a></li>
<a class="link" href="/topics/45/diet">                                </a><li>
<a class="link" href="/topics/45/diet">                                    <strong>2</strong><br>QUESTIONS
                                </a></li>
<a class="link" href="/topics/45/diet">                            </a></ul>
<a class="link" href="/topics/45/diet">                        </a></div>
<a class="link" href="/topics/45/diet">                    </a>
                </div>

当我通常需要一个<div>里面一个<a>,我用一个<span>而是用display:block;。不会因上述错误而破坏 Firefox 中的布局,并且其行为与<div> does.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将锚标记编码为块元素以包含其他块元素 的相关文章

  • 如何将 ng-repeat 分成批次

    我正在做这个 ref checkbox 示例http getbootstrap com javascript buttons examples http getbootstrap com javascript buttons example
  • 如何将安全中心与 Flexbox 一起使用?

    居中的弹性盒项目可能会出现不良行为当他们溢出容器时 https stackoverflow com questions 33454533 cant scroll to top of flex item that is overflowing
  • 为什么 z-index 对 div 不起作用?

    我试图让我的页脚显示在页脚背景的顶部 但 z index 似乎不起作用 有人看出它有什么问题吗 http jsfiddle net f2ySC http jsfiddle net f2ySC 你必须明确地定义position财产 foote
  • 角度斜线被编码

    我和这个人有同样的问题 angularjs slash after hashbang gets encoded https stackoverflow com questions 17530924 angularjs slash after
  • 对于跨域 XHR 丢弃 cookie 不是更简单吗?

    在进行网络开发时 我一直在与奇怪的限制作斗争 其中之一是 AJAX 请求的同源限制 我问自己 在创建请求时丢弃 cookie 而不是阻止对跨域资源的请求是否会更简单 以避免滥用 AJAX 请求的身份验证凭据 浏览器会话 Cookie 是一种
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • HTML Canvas:旋转图像 3D 效果

    我怎样才能旋转图像 例如45度 并挤压图像 假设我有一个完美的方形图像 我可以将它旋转到我想要的任何角度 但我想让旋转后的正方形被压扁 使高度比宽度小 2 3 生成的图像将不是一个完美的旋转正方形 而是一个被压扁的正方形 你知道我怎样才能达
  • HTML 中的自定义自关闭/不配对标签?

    以下代码 jsfiddle http jsfiddle net CUZta var div document createElement div div innerHTML
  • IE7内容可编辑自动换行

    我有以下代码 div class editable This is test text This is test text This is test text This is test text This is test text Thih
  • 如何通过单击链接并确认弹出窗口来检查两个条件?

    我是 JavaScript 新手 有 2 个 html 链接 li a class dropdown item confirm href wtdata a li li a class dropdown item confirm href f
  • 录制视频和音频并上传到服务器

    我想为网站添加视频录制功能 我一直在搜索并尝试所有可能的可用解决方案 但还没有任何工作正常 我已经尝试过以下解决方案 WebRTC 我知道使用 WebRTC 我们可以从网络摄像头和麦克风获取流 我发现了很多关于相同内容的文章 但没有一篇解释
  • BEM 与 SASS 和 :hover

    使用 BEM 和 SASS 声明活动 焦点 悬停状态的正确方法是什么 例如 我有这样的结构 div class card img class card image src alt div class card overlay div cla
  • Facebook Instant Game - 上传捆绑的 zip 文件会导致 Web 托管出现 SDK 参考错误

    当我尝试上传简单的游戏 应用程序时 我收到一条错误消息 游戏必须通过我们的 CDN 引用我们支持的 SDK 之一 不过我已经给出了 SDK 参考 难道不是这个吗 我也浏览了 facebook 文档的 SDK 参考 但它对我不起作用 有人以前
  • CSS 列不会水平对齐

    我正在使用列计数来允许我的文本流入两个不同的列 但第一列的顶部 最左边 低于另一列 col moz column count 2 webkit column count 2 column count 2 div h3 Options h3
  • BS3 - img 响应类 - 为什么没有最大高度?

    引导程序 3 包括 img responsive班级 应用这些 css 设置 display block height auto max width 100 为什么没有max height 100 我发现添加这个使得图片的高度也适合 但我不
  • 在 X 轴刻度上渲染 HTML

    我想在 D3 图表的 x 轴上渲染 HTML 基本上 我希望轴上的每个标签都是到数据中另一列的超链接 我试过了 x domain data map function d return a href d Name a 但它根本不起作用 我得到
  • css 变换,chrome 中的锯齿状边缘

    我一直在使用 CSS3 转换来旋转网站中带有边框的图像和文本框 问题是 Chrome 中的边框看起来呈锯齿状 就像没有抗锯齿的 低分辨率 游戏一样 在 IE Opera 和 FF 中看起来好多了 因为使用了 AA 仍然清晰可见 但也没有那么
  • Phantomjs page.content 未检索页面内容

    我使用 Phantomjs 来抓取使用 JavaScript 和 Ajax 加载动态内容的网站 我有以下代码 var page require webpage create page onError function msg trace v
  • Angular 中的动态子组件

    我正在构建一个具有一致的元素列表设计模式的应用程序 如果我有一个 A 类型的对象 我会创建AComponent它接受a作为输入 然后创建另一个组件来迭代 A 列表 AListComponent 那么如果我有一个对象 B 我需要做同样的事情
  • 使用 JavaScript 和 HTML 打印表情符号

    为什么这有效 p x1f604 p 而这并没有 document getElementById emoji innerHTML String fromCharCode parseInt 1f604 16 JS 术语中的 char 实际上是一

随机推荐