css - 多列在使用 ASP.NET 的 IE11 中不起作用

标签 css asp.net master-pages internet-explorer-11 multiple-columns

我找了又找，对这个问题束手无策。

我正在使用 VS2008，ASP.net 2.0。

我正在尝试使用多列，它在 Firefox 和 Chrome 中运行良好，但在 IE11 中遇到问题。我已经阅读了所有说明它有效的文档，并且它适用于普通的 .aspx 和 .html 文件，但是当从母版页中使用它时，它根本不起作用。当我在使用母版页的页面上查看 IE 11 中的开发人员工具时，似乎没有接受任何多列属性(列数、列规则、列间隙)(它们下方的红色波浪线)。然而，我的基本 .aspx 文件一切正常。任何见解将不胜感激!有任何建议的解决方法吗？

谢谢!!

这是我的普通测试 .aspx 文件，可以正常工作:

<%@ Page Language="Oxygene" AutoEventWireup="true" CodeFile="ColumnTestForIE.aspx.pas" Inherits="ColumnTestForIE" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type='text/css'>
        .testTwoColumns 
        {
            column-count: 2 !important;
            column-gap: 1px !important;
	        columns: 2 !important;
            -moz-column-count: 2 !important;
            -moz-column-gap: 1px !important;
            -ms-column-count: 2 !important;
            -ms-column-gap: 1px !important;
            -webkit-column-count: 2 !important;
            -webkit-column-gap: 1px !important;
            -moz-column-rule: 1px solid #000 !important;
            -webkit-column-rule: 1px solid #000 !important;   
            column-rule: 1px solid #000 !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="testTwoColumns">
        <p style="overflow: hidden;">ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sodales sapien. Quisque id quam lacinia nisl consectetur finibus. Aliquam vestibulum urna quis cursus congue. Nam risus odio, pulvinar et sagittis quis, imperdiet quis erat. Quisque lobortis est neque, sed congue neque iaculis porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et arcu nisi. Proin vitae aliquam elit, eu lobortis massa. Morbi risus enim, malesuada nec placerat bibendum, gravida eu eros. </p>
        <p style="overflow: hidden;">Nullam accumsan turpis at eros condimentum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam nec metus convallis, dapibus sem eu, rutrum sem. Etiam elementum, odio mattis lacinia tristique, ante dolor facilisis ipsum, ut volutpat tortor ante non augue. Maecenas placerat enim sollicitudin tellus aliquet, id varius elit fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam dignissim pretium risus eget tincidunt. Vestibulum eu mauris nec nisl accumsan ornare sed nec turpis. In turpis metus, ultricies ac ultricies a, porttitor vulputate nisl. Etiam laoreet accumsan turpis, ac semper justo feugiat nec. </p>
        <p style="overflow: hidden;">Suspendisse eget molestie tortor, id efficitur purus. Sed vitae eros libero. Maecenas convallis tellus non odio ornare, pulvinar finibus neque aliquet. Nulla lorem quam, congue non felis non, faucibus dapibus ex. Vivamus egestas quis arcu sed pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed fringilla mattis dolor, non ullamcorper neque accumsan id. Nunc blandit purus eget maximus suscipit. Nullam ac commodo tellus, at dictum libero. Aenean et tortor id velit vehicula eleifend. Nullam at dolor euismod, mollis justo in, eleifend orci. Quisque facilisis mi vel massa porta semper vitae nec magna. Ut bibendum, lectus ac vestibulum tempor, odio turpis faucibus elit, non imperdiet dui turpis vel ipsum. Duis lectus magna, dapibus vitae justo aliquam, cursus molestie ante. </p>
        <p style="overflow: hidden;">Mauris molestie commodo augue. Sed ultrices sit amet arcu a malesuada. Suspendisse ultrices leo nec mi malesuada gravida. Vivamus feugiat fermentum mauris at gravida. Nam iaculis, ipsum et malesuada iaculis, est orci interdum tortor, imperdiet elementum odio velit placerat sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus laoreet laoreet sodales. Phasellus pharetra condimentum quam. Donec fringilla leo dui, et porta odio eleifend a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porta est sed cursus fermentum. Praesent scelerisque orci sit amet justo efficitur dictum.</p>
        <p style="overflow: hidden;">Donec vitae diam gravida purus volutpat auctor. Proin id mollis arcu. Mauris fermentum malesuada ante, ac rutrum mauris molestie ut. Sed consequat neque condimentum turpis tristique sodales. Maecenas sed ex non tellus fermentum varius sed id est. Etiam tempor nibh neque. Sed ac sem et sem lacinia egestas in vel arcu. </p>
    </div>
    </form>
</body>
</html>

然后我尝试这两个文件，母版页和使用它的网络表单:

主页:

<%@ Master Language="Oxygene" AutoEventWireup="true" CodeFile="ColumnTestMP.master.pas" Inherits="ColumnTestMP" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
       <style type='text/css'>
        .testTwoColumns 
        {
            column-count: 2 !important;
            column-gap: 1px !important;
	        columns: 2 !important;
            -moz-column-count: 2 !important;
            -moz-column-gap: 1px !important;
            -ms-column-count: 2 !important;
            -ms-column-gap: 1px !important;
            -webkit-column-count: 2 !important;
            -webkit-column-gap: 1px !important;
            -moz-column-rule: 1px solid #000 !important;
            -webkit-column-rule: 1px solid #000 !important;   
            column-rule: 1px solid #000 !important;
            
        }
        </style>
    <asp:contentplaceholder id="head" runat="server">
    </asp:contentplaceholder>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    
    </form>
</body>
</html>

以及使用它的 Web 表单:

<%@ Page Language="Oxygene" MasterPageFile="~/ColumnTestMP.master" AutoEventWireup="true" CodeFile="ColumnTestMasterPageForIE.aspx.pas" Inherits="ColumnTestMasterPageForIE" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="testTwoColumns">
    <p style="overflow: hidden;">ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sodales sapien. Quisque id quam lacinia nisl consectetur finibus. Aliquam vestibulum urna quis cursus congue. Nam risus odio, pulvinar et sagittis quis, imperdiet quis erat. Quisque lobortis est neque, sed congue neque iaculis porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et arcu nisi. Proin vitae aliquam elit, eu lobortis massa. Morbi risus enim, malesuada nec placerat bibendum, gravida eu eros. </p>
    <p style="overflow: hidden;">Nullam accumsan turpis at eros condimentum varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam nec metus convallis, dapibus sem eu, rutrum sem. Etiam elementum, odio mattis lacinia tristique, ante dolor facilisis ipsum, ut volutpat tortor ante non augue. Maecenas placerat enim sollicitudin tellus aliquet, id varius elit fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam dignissim pretium risus eget tincidunt. Vestibulum eu mauris nec nisl accumsan ornare sed nec turpis. In turpis metus, ultricies ac ultricies a, porttitor vulputate nisl. Etiam laoreet accumsan turpis, ac semper justo feugiat nec. </p>
    <p style="overflow: hidden;">Suspendisse eget molestie tortor, id efficitur purus. Sed vitae eros libero. Maecenas convallis tellus non odio ornare, pulvinar finibus neque aliquet. Nulla lorem quam, congue non felis non, faucibus dapibus ex. Vivamus egestas quis arcu sed pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed fringilla mattis dolor, non ullamcorper neque accumsan id. Nunc blandit purus eget maximus suscipit. Nullam ac commodo tellus, at dictum libero. Aenean et tortor id velit vehicula eleifend. Nullam at dolor euismod, mollis justo in, eleifend orci. Quisque facilisis mi vel massa porta semper vitae nec magna. Ut bibendum, lectus ac vestibulum tempor, odio turpis faucibus elit, non imperdiet dui turpis vel ipsum. Duis lectus magna, dapibus vitae justo aliquam, cursus molestie ante. </p>
    <p style="overflow: hidden;">Mauris molestie commodo augue. Sed ultrices sit amet arcu a malesuada. Suspendisse ultrices leo nec mi malesuada gravida. Vivamus feugiat fermentum mauris at gravida. Nam iaculis, ipsum et malesuada iaculis, est orci interdum tortor, imperdiet elementum odio velit placerat sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus laoreet laoreet sodales. Phasellus pharetra condimentum quam. Donec fringilla leo dui, et porta odio eleifend a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla porta est sed cursus fermentum. Praesent scelerisque orci sit amet justo efficitur dictum.</p>
    <p style="overflow: hidden;">Donec vitae diam gravida purus volutpat auctor. Proin id mollis arcu. Mauris fermentum malesuada ante, ac rutrum mauris molestie ut. Sed consequat neque condimentum turpis tristique sodales. Maecenas sed ex non tellus fermentum varius sed id est. Etiam tempor nibh neque. Sed ac sem et sem lacinia egestas in vel arcu. </p>
</div>
</asp:Content>

呈现的代码隐藏在没有母版页和有母版页的情况下完全相同，所以我不明白为什么一个版本按预期呈现列，而另一个版本却没有。

提前致谢!

最佳答案

尝试添加“溢出:隐藏；”到 div。

关于css - 多列在使用 ASP.NET 的 IE11 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26897178/

上一篇：javascript - Firefox box-sizing + expanding div = missing padding?

下一篇：css - 表格在无序列表项上对齐

相关文章：

c# - #DEBUG ASPX 页面中的预处理器语句

jquery - 单击日历时将数据加载到部分 View (ASP.NET MVC)

javascript - 如何使用 shadow-dom web 组件实现一致的焦点轮廓颜色？

c# - ASP.Net 将文档转换和合并为单个 PDF

javascript - 使用 jquery 在 CSS 中设置背景图像

javascript - 如何将 div 的位置设置为与 HTML <body> 开始标记相同的位置？

asp.net - 控件何时使用其设计时值进行初始化？

asp.net - ASP.NET 中的深层嵌套母版页是否存在任何问题？

html - 如何使用左对齐文本叠加层居中图像

css - SCSS Sprite 位置计算生成无效的 CSS

©2024 IT工具网  联系我们