如何确保 Reader 查看器中显示 IMG？

Question

我正在使用以下 HTML/CSS 来显示我的产品的屏幕截图图像：

<p>Review the following screenshots:</p>
<div>
<a href="images/pic1.png" target="_blank" title="Full size screenshot 1">
<img border="0" src="images/pic1.png" class="wbrdr"></a>
<a href="images/pic2.png" target="_blank" title="Full size screenshot 2">
<img border="0" src="images/pic2.png" class="wbrdr"></a>
</div>

与以下 CSS:

img.wbrdr
{
    padding: 1px;
    border: 1px solid #cccccc;
    -moz-box-shadow: 3px 3px 3px #cccccc;
    -webkit-box-shadow: 3px 3px 3px #cccccc;
    box-shadow: 3px 3px 3px #cccccc;
    height: auto; 
    width: auto; 
    max-width: 200px; 
    max-height: 200px;
}

当正常查看页面时，这工作正常，但由于某种原因，当我试图在 iOS 中将其视为 Sarari 中的 "Reader View" 或 Microsoft 中的 "Reading view" 时边缘：

我的屏幕截图图像不是 used/displayed。（尽管这在 Firefox 中有效。）

知道我做错了什么吗？

Answer 1

我运行您直接在 Microsoft Edge 中提供的代码，阅读视图图标是灰色的。

然后我添加了一些其他段落，我发现屏幕截图图像可以在Microsoft Edge 的阅读视图中显示而不会被<div> 包裹。您可以在 Microsoft Edge 中尝试以下示例：

<h2>A layout that is easy on the eyes</h2>
<p>Some Web articles require significant effort to read, because there is so much other content on the page. In contrast, the effect we were going for with reading view in IE 11 can almost be described as one of relief – the page should just feel good to look at. To that end, we gave attention to a few aspects of the layout that can make a difference, specifically aiming to get the right balance of column width, line height, and text size.</p>
<p>For example, because the user can change the font size in reading view it was important for the feature to adjust the line spacing too as the font got bigger. Other considerations were padding (white space) between columns, around images, and between paragraphs. The goal was for the page to feel clean and free of distractions, and this padding helps your eyes and brain quickly identify and distinguish the different elements of the article from each other, as well as provide cues for orienting your path through the text.</p>
<p>Review the following screenshots:</p>
<a href="images/pic1.png" target="_blank" title="Full size screenshot 1">
    <img border="0" src="images/pic1.png" class="wbrdr">
</a>
<a href="images/pic2.png" target="_blank" title="Full size screenshot 2">
    <img border="0" src="images/pic2.png" class="wbrdr">
</a>

如何确保 Reader 查看器中显示 IMG？

How to ensure that an IMG is displayed in the Reader Viewer?

html

css

safari

reader

microsoft-edge