Question

我的问题是它显示不同输出的原因[超级链接命名为HOME] 在浏览器中（高于div部分）与visual studio中的设计页面相比!!! 请帮助我，我不太了解HTML，学习.....

***＆lt;％@ Page Language =＆＃34; C＃＆＃34; AutoEventWireup =＆＃34;真＆＃34;代码隐藏=＆＃34; login.aspx.cs＆＃34;继承=＃＆34; project.login＆＃34; ％GT;

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
    .back {
        background-color:chocolate;
        width:inherit;
        height:65px
    }
    .images{width:426px;
            height:65px;
    }
    .hyperlinks {position:relative;
                 float:right;
                 margin-top:-20px;
                 margin-left:10px;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
    <div class="back">
        <asp:Image ID="Image1" runat="server" CssClass="images" ImageUrl="~/images/images.jpg" />
        <asp:HyperLink ID="HyperLink1" runat="server" CssClass="hyperlinks">Home</asp:HyperLink >
    </div>
</form>
</body>
</html>***

Answer 1

问题仅出现在Internet Explorer中，然后仅出现在兼容模式下。显然，Visual Studio中的设计人员模仿了IE的兼容模式。

如果您将问题降至显示所需的最低要求，则可以获得此

＆＃13;

.back {
  background-color: chocolate;
  height: 65px;
}

.images {
  height: 100%;
}

.hyperlinks {
  float: right;
  margin-left: 10px;
}

＆＃13;

<div class="back">
  <img id="Image1" class="images" src="http://lorempixel.com/195/65" />
  <a id="HyperLink1" class="hyperlinks">Home</a>
</div>

＆＃13;

这会在所有符合标准的浏览器中将浮动链接放在其父级的右上角。但是将IE切换到兼容模式会将链接置于橙色栏下方（如果你给链接一个负的上边距，它会向上移动一点，但这不会改变问题。）

现在一个临时解决方案是使用所有浏览器处理相同的CSS，兼容模式与否。例如，像这样的东西。

＆＃13;

.back {
  background-color: chocolate;
  height: 65px;
  text-align: right;
}

.images {
  height: 100%;
  float: left;
}

.hyperlinks {
  line-height: 110px;
  margin-left: 10px;
}

＆＃13;

<div class="back">
  <img id="Image1" class="images" src="http://lorempixel.com/195/65" />
  <a id="HyperLink1" class="hyperlinks">Home</a>
</div>

＆＃13;

更持久的解决方案是确保Visual Studio的设计人员能够以标准兼容模式而不是兼容模式显示内容。但是，我还没有找到办法做到这一点。

asp设计显示和渲染浏览器显示不一样？

1 个答案: