个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在用一系列引号设计一个页面。每条引述都是以下形式:
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
报价应该被左上角的大引号( ldquo ，绝对定位)和右下角的大引号( rdquo ， float 然后相对定位)挡住。引文中的文字是text-indent -ed 以便左上角的引号不与文本重叠。在 Firefox (3.6) 和 Chromium (8) 中，这工作正常，但在 IE (8) 中，当我更改 ldquo 上的字体大小时文本缩进似乎从基于容器字体大小的大小升级到 ldquo 的大小(容器中的第一个元素)。
我发现如果我添加一个空的 <span />之前ldquo并更新其左偏移量以匹配它在 IE 中工作的容器字体大小的文本缩进，但这在 Firefox 和 Chromium 中中断，它们期望左偏移量是 ldquo 的一小部分的字体大小。并不是说作为“修复”无论如何都会特别令人愉快。
重现问题的一些代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
text-indent: 2em;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:0;
top: -0.15em;
}
.ldquo {
position:absolute;
left: -0.6em;
}
.rdquo {
float:right;
position:relative;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
</style>
</head>
<body>
<div id="container">
<blockquote>
<span class="ldquo">“</span>A quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. Author</cite>
</blockquote>
<blockquote>
<span class="ldquo">“</span>Another quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="rdquo">”</span>
<cite>A. N. Other Author</cite>
</blockquote>
<!-- more quotes -->
</div>
</div>
</body>
</html>
有没有人以前见过这个，可以帮我解决这个问题？谢谢。
最佳答案
好的。我想我找到了修复布局的解决方案，不幸的是不是错误。
我删除了文本缩进，而是向 ldquo 添加了适当的右边距，然后我向左浮动。由于 ldquo 的高度为零，这让我回到了文本位于引号上方的原始情况。但是添加一个最小的 1px 高度，修复它，并且手指交叉似乎工作。
这是最终的 CSS。
#container {
width: 20em;
}
blockquote {
margin :0 0 2em 0;
position:relative;
font-size:0.7em;
text-align:justify;
}
.ldquo, .rdquo {
color: #EC008C;
font-size:3em;
height:1px;
top: -0.15em;
position:relative;
}
.ldquo {
float:left;
margin-right:0.14em;
}
.rdquo {
float:right;
left: 0.05em;
}
blockquote cite {
display:block;
font-weight:bold;
text-indent:0;
}
关于html - 当内部元素的字体大小发生变化时，IE 出现文本缩进问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4445881/
25
4
0
我是网页设计新手。现在我遇到了我目前工作的 2 个网站的问题。我的模板只支持 Firefox 浏览器，不支持其他主流浏览器，如 IE、chrome、Opera、safari。 我试过一些 If IE
在我的 HTML 上，使用了下面的元标记来解决一些字体问题。我只想知道: 这两个元标记的含义相同吗？还是每一个都不一样？ [以逗号分隔] [以分号分隔] 请解释一下。 最佳答案 Microsoft
这句话究竟是什么意思？ 部分示例使用 ,分隔 IE 的版本，而有些使用 ; ;哪个是正确的？ 订单IE=9; IE=8; IE=7; IE=EDGE有一些重要性，我想知道。 编辑:我正在使用 最佳答
这句话究竟是什么意思？ 一些示例使用 ,分隔 IE 的版本，而有些使用 ; ;哪个是正确的？ 订单IE=9; IE=8; IE=7; IE=EDGE有一定的重要性，我想知道。 编辑:我正在使用 最佳
在 IE 8 中，我们可以带出开发者工具。然后在顶部，有一个浏览器模式: IE 7 IE 8 IE 8 Compatibility View 所以如果 IE 7是强制页面显示为好像浏览器是 IE 7，
我认为不需要任何描述。我只需要我的 IE 11 单选按钮与 IE 8 中的一样，即颜色为 3-d 蓝色。在 IE 11 中，默认单选按钮是二维的，颜色为黑色。目前还没有解决这个问题。 最佳答案 检查这
我必须编写一个显示密码对话框的小程序。问题是对话框设置为始终在顶部，但是当用户单击 IE 窗口时，对话框仍然隐藏在 IE 窗口后面。并且由于对话框是模态的并且保持全部 IE 线程 IE Pane 不会
如何制作适用于所有 IE 浏览器的样式表。不只是 ie.css 中的 IE 8 本站主题的ie.css文件中只包含IE8样式。 最佳答案 他们这样做的原因是因为他们可能不支持 Internet Exp
使用有什么区别吗 ... 或者 ... ? 最佳答案 如果一种罕见的、神话般的浏览器被称为 ，就会有所不同。 Internet Explorer 6.66 被发现。 关于internet-explor
我试图在 IE7+8 中使用字体图标并遇到了一个问题，这个问题可以通过仅 IE7 的样式表轻松解决。长话短说，现在 IE7 和 IE9 都以某种方式运行我的仅 IE7 样式表(IE8 运行得很好)。我
我实现了上传的图片显示在网站上。为了 图片未正确上传意味着我将错误图片替换为 那？当我加载网站时，我遇到了 错误图像不存在的问题 定义，并且灯箱在 chrome 和 firefox 中加载 但它没有在
我有一个特殊的问题。我正在尝试“现代化”和为旧 IE 制作的旧应用程序，以便在 IE 11 中工作。但不知何故，CSS 类没有应用于 DOM 元素。 CSS 非常简单: .header { h
对于 IE 7 和 IE 8，IE 上 URL 的 2k 长度限制是否仍然存在？ (后 IE 6 时代) 最佳答案 http://support.microsoft.com/kb/208427 似乎它
我们正在完善这个网站:dev.underglassframing.com 除了主要内容 div (#main) 后面的背景在 IE 7、8 和 9 中的内容之前停止外，在每个浏览器中一切都很好。我在末
我在 IE 11 中搜索过与 border-radius 相关的类似问题，但是 only one found on the Microsoft IE Developer site描述了自从“升级”到
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit th
这个问题在这里已经有了答案: (CSS?) Eliminating browser's 'selected' lines around a hyperlinked image? (5 个答案) 关闭
我知道有 1000 个问题，但我就是无法让它发挥作用。我只是想针对所有版本的 IE(包括 IE11)并给 html 一个特定的类，对于所有其他浏览器(firefox、opera、chrome)，我希望
我有一个嵌入了 Internet Explorer 的程序。 在某些情况下，我需要调整嵌入式 IE 的缩放级别。我正在使用带有 OLECMDID_OPTICAL_ZOOM 的 ExecWB 命令来执行
我正在开发一个网络应用程序。我的应用程序在 chrome 和 firefox 上运行良好，但由于某种原因在 IE 中出现了一些错误。即使出现几个错误，应用程序仍然可以顺利运行，没有明显的问题。 我想对
我是一名优秀的程序员,十分优秀！