图像按钮显示在Firefox和Chrome的另一行上 [英] Image button displays on another row on Firefox and Chrome

问题描述

在aspx页面中，横幅右侧有图像控制（请参阅下面的简化代码）。如果我将页面宽度缩小，则图像控件可能会转到另一行。对于Chrome浏览器和Firefox浏览器都会出现这种情况，但对IE来说也是如此。我该怎么做才能使图像控件始终与IE中的行为一致？谢谢。

In an aspx page, there is image control on the banner's right (see the simplified code below). If I drag the page's width narrow, the image control may go to another row. This happens for both Chrome and Firefox browsers, but it is OK for IE. What should I do to make the image control always on the same row as behaved in IE? Thanks.

<div class="background_tlbr"  style=" float:right; padding-removed200px; padding-removed5px;" >
   <asp:Image id="imgLogo" runat="server" ImageUrl="~/images/xxx.png" style="height:45px; width: auto"  />
</div>

推荐答案

问题是很明显，你正试图调整窗口的大小。这确实缩短了浏览器视口的宽度和高度（在你的情况下只有讨论）。



缩短页面时，元素移动到下一行，因为没有足够的空间在该行上呈现元素。因此，它移动到下一行。在这种情况下，最好使用CSS3媒体查询。这样，您就可以为不同屏幕尺寸的元素创建单独的主题。例如：

The problem is clear, you are trying to resize the window. Which indeed, shortens the width and height (in your case only width is to be discussed) of the browser's viewport.

When you shorten the page, the element moves to the next line, because there is not enough space for the element to be rendered on that row. Thus, it moves to the next row. In such cases, it is better to use CSS3 media queries. This way, you will be able to create a separate theme for your elements in different screen sizes. For example:

//  default settings; I won't talk about them
@media screen and (max-width: 300px) {
   // style for cases where screen is only 300px wide
}

在媒体案例中，您可以更改元素的布局或减少其填充，边距和宽度，以便它们可以适合该空间。我还建议您尝试使用开发人员工具，并在视口调整大小时检查元素的大小调整方式。尝试按 F12 ，然后检查分辨率和元素的渲染方式。它至少会让你知道发生了什么 。



如需更多信息，请阅读< a href =https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries> MDN上的CSS媒体查询 [ ^ ]。

In the media case, you can change the layout of your elements or decrease their paddings, margins and widths so that they can fit into that space. I would also recommend that you try to use the developer tools and check into how elements are resized when your viewport resizes. Try pressing F12 and then check how resolution and elements are rendered. It would at least give you an idea of what is going on.

For more, please read CSS Media Queries on MDN[^].

这篇关于图像按钮显示在Firefox和Chrome的另一行上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！