Question

因此，我已经将一些HTML放入SharePoint上的脚本编辑器Web部件中。在Chrome SharePoint上看起来不错，在Explorer 11上的本地服务器上看起来也很正确...

但是，在Explorer 11中查看SharePoint片段时，数字文本会移到每个按钮的右侧。

这是资源管理器上的脚本编辑器Webpart的外观：

有人知道这是否是SharePoint / Explorer问题或其他原因吗？谢谢

此代码段是在我的资源管理器本地服务器和Chrome / Chrome Sharepoint上的外观

 .grid {
            margin: 0 auto;
            width:150vw;
            max-width: 150vh;
            /*height: 25vw;*/
            /*max-height: 25vh;*/
            font-size: 2rem;

        }
        
        .row1 {
            display: flex;
            float: center;
            margin: 0 auto;
            width:50vw;
            max-width: 50vh;
            /*height: 25vw;*/
            /*max-height: 25vh;*/
            font-size: 2rem;

        }
        .row2 {
            display: flex;

        }
        
        .box {
            background: #003b5c;
            margin: 5px;
            color: white;
            font-weight: bold;
            flex: 1 0 auto;
            position: relative;
        }
        
        .box:after {
            content: "";
            float: left;
            display: block;
            padding-top: 100%;
        }
        
        .box > div {
           
            background-size: cover;
            background-position: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
        }
        
        /*  Apply images here */

        .topblock {
            background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");           
        }
        .leftblock {
            background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
        }
        .midblock {
            background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
        }
        .rightblock {
            background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
        }

        /* Hover effect*/

        .section {
            align-items: center;
            text-align: center;
            box-shadow: 0px 0px 5px 2px #7a9bac79;
            transition: box-shadow 0.2s linear;
            margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */
        }


        .section:hover {
            box-shadow: 0px 0px 0px 8px #ffc72c;
        }

<body>
        <div class="row1">
            <!-- Link and Title -->
            <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
                <div class="topblock" href=""><h4 style="color:white;">1</h4></div>               
            </div>
        </div>


    <div class="grid">
        <div class="row2">
            <!-- Link and Title -->
            <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
                <div class="leftblock"><h4 style="color:white;">2</h4></div>
            </div>
            <!-- Link and Title -->
            <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
                <div class="midblock"><h4 style="color:white;">3</h4></div>
            </div>
            <!-- Link and Title -->
            <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
                <div class="rightblock"><h4 style="color:white;">4</h4></div>
            </div>
        </div>
    </div>
</body>

Answer 1

在代码中添加以下样式。

.section h4{
    margin:0px !important;
}

完整代码：

<style type="text/css">
.grid {
    margin: 0 auto;
    width:150vw;
    max-width: 150vh;
    /*height: 25vw;*/
    /*max-height: 25vh;*/
    font-size: 2rem;

}

.row1 {
    display: flex;
    float: center;
    margin: 0 auto;
    width:50vw;
    max-width: 50vh;
    /*height: 25vw;*/
    /*max-height: 25vh;*/
    font-size: 2rem;

}
.row2 {
    display: flex;

}

.box {
    background: #003b5c;
    margin: 5px;
    color: white;
    font-weight: bold;
    flex: 1 0 auto;
    position: relative;
}

.box:after {
    content: "";
    float: left;
    display: block;
    padding-top: 100%;
}

.box > div {

    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}

/*  Apply images here */

.topblock {
    background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");           
}
.leftblock {
    background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.midblock {
    background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.rightblock {
    background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}

/* Hover effect*/
.section {
    align-items: center;
    text-align: center;
    box-shadow: 0px 0px 5px 2px #7a9bac79;
    transition: box-shadow 0.2s linear;
    margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */
}
.section:hover {
    box-shadow: 0px 0px 0px 8px #ffc72c;
}
.section h4{
    margin:0px !important;
}
</style>

<div class="row1">
    <!-- Link and Title -->
    <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
        <div class="topblock" href=""><h4 style="color:white;">1</h4></div>               
    </div>
</div>

<div class="grid">
    <div class="row2">
        <!-- Link and Title -->
        <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
            <div class="leftblock"><h4 style="color:white;">2</h4></div>
        </div>
        <!-- Link and Title -->
        <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
            <div class="midblock"><h4 style="color:white;">3</h4></div>
        </div>
        <!-- Link and Title -->
        <div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
            <div class="rightblock"><h4 style="color:white;">4</h4></div>
        </div>
    </div>
</div>

资源管理器11上的SharePoint html脚本编辑器代码段问题

1 个答案: