Css asp设计显示和渲染浏览器显示不相同？_Css_Asp.net_Asp.net Mvc_Html

Css asp设计显示和渲染浏览器显示不相同？

css asp.net asp.net-mvc html

Css asp设计显示和渲染浏览器显示不相同？,css,asp.net,asp.net-mvc,html,Css,Asp.net,Asp.net Mvc,Html,我的问题是为什么它显示不同的输出[名为HOME的超链接] 在浏览器中（位于div零件上方）与visual studio中的设计页面相比！！！请帮帮我，我对HTML了解不多，正在学习…… *** .回来{ 背景颜色：巧克力色；宽度：继承；高度：65px } .图像{宽度：426px；高度：65px； } .超链接{位置：相对；浮动：对；利润上限：-20px；左边距：10px； } 家 *** 该问题仅在Internet Explorer中出现，然后仅在兼容模式下出现。很明显，Vi

我的问题是为什么它显示不同的输出[名为HOME的超链接] 在浏览器中（位于div零件上方）与visual studio中的设计页面相比！！！请帮帮我，我对HTML了解不多，正在学习……

***


.回来{
背景颜色：巧克力色；
宽度：继承；
高度：65px
}
.图像{宽度：426px；
高度：65px；
}
.超链接{位置：相对；
浮动：对；
利润上限：-20px；
左边距：10px；
}
家
***

该问题仅在Internet Explorer中出现，然后仅在兼容模式下出现。很明显，VisualStudio中的设计师模仿IE的兼容模式

如果您将问题归结为显示它所需的最小值，您将得到以下结果

.back{
背景颜色：巧克力色；
高度：65px；
}
.图像{
身高：100%；
}
.超链接{
浮动：对；
左边距：10px；
}

家

总的来说，VisualStudio更适合于“编程”——它的网页设计师也适合于它——因此，它向您展示了

控件的位置（指南）。你不应该依赖它来进行“像素完美”的UI设计，特别是当你有复杂的css布局时。太长，读不下去了在Visual Studio中编写代码，然后在浏览器中查看（例如，Edge、Chrome、FF等）。如果你真的想学习HTML/CSS/JavaScript，我只想接着说，然后放下训练轮，停止使用设计器。最好的学习方法是沉浸其中。进入那里，找出原因。@EdSF和Chris如果你们能解释VS designer中的哪个缺陷导致了这种差异，那就太好了。@MrLister详细信息-哪个IMHO，不是一个“缺陷”，更像是焦点（更多地放在编程方面，把“呈现”的复杂性/差异留给任何客户端/浏览器）@EdSF问题是Visual Studio的设计器在兼容模式下模拟IE。我会把它打出来作为答案。+1 VS将使用IE引擎是“预期的”，很像WinForms中的浏览器控件，只是找不到关于它的正式文档。此外，除了HTML/CSS之外，一旦添加控件（例如数据控件），它们在设计视图中可见（但在任何浏览器中都不会呈现）。诚然，如果有需要处理的设置，我不知道。。。我已经很长时间没有使用design view了。。。
<!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>***