Проблема с навигационным меню SharePoint в выпадающем меню Inte rnet Explorer Edge - PullRequest
Новая
       13

Проблема с навигационным меню SharePoint в выпадающем меню Inte rnet Explorer Edge

0 голосов
/ 07 марта 2020

У меня есть меню навигации на сайте SharePoint. Выравнивания меню навигации отлично работают во всех браузерах, кроме IE Edge. Inline-grid CSS вызывает некоторые проблемы в IE Edge, поэтому я добавил -ms-inline-grid CSS, который делает навигационный контент в формате сетки. но содержимое выровнено снизу. Вы можете сослаться на изображение, которое я упоминал.

Chrome изображение браузера

Chrome Изображение браузера

IE Изображение браузера Edge

IE Изображение браузера Edge

CSS

.dropdown-content {
	display: none;
	position: absolute;	
	background-color: #004766;
	width: 100%;
	left: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	padding: 0rem 0rem 0.6rem 0.5rem;
  }
  
  .dropdown-content .header {
	background: red;
	padding: 16px;
	color: white;
  }
  
  .dropdown:hover .dropdown-content {
	display: block;
  }

.row:after {
	content: "";
	display: table;
	clear: both;
  }

.nav-secondary-category {
		margin: 0 1rem 1.6rem 0;
		width: 17%;
	}

@media screen and (min-width: 920px){
	.nav-secondary-category:nth-child(odd) {
		clear: none;
	}
}

.column {
	width:calc(25% - 4rem);
	padding: 10px;
	background-color: #004766;
	height: auto;
	display: inline-grid !important;
	display: -ms-inline-grid !important;
  }

.nav-secondary-label{
	border-bottom: 0.1rem solid #246D8F;
	color: #AADBF1;
	/* text-align: initial; */
	text-align: justify;
  }

@media screen and (min-width: 700px){
	.nav-secondary-label {
		border-bottom: 0.1rem solid #246D8F;
		color: #AADBF1;
		margin: 0.8rem 0.6rem 0.5rem .8rem;
		/* padding-bottom: .8rem; */
		padding-bottom: .1rem;
	}
}

.menu a {
	text-shadow:0px 1px 0px rgba(0,0,0,0.5);
  /* color:#777; */
    color:white;
    transition:color linear 0.15s;
    text-decoration: none;
    display:block;
}

.navbar a {
	float: left;
	font-size: 17px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
  }

.txt {
    font-family: "freight-sans-pro",sans-serif;    
    line-height: 1.2;
    position: relative;
    -webkit-transition: 0.2s all cubic-bezier(0.25,0.46,0.45,0.94);
	transition: 0.2s all cubic-bezier(0.25,0.46,0.45,0.94);
	padding: 0.5rem ;
	text-align: left !important;
	white-space:nowrap;
 }

.nav-secondary-items{
	margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;    
	display: block;
	padding-left: 5px;
}

.menu ul {
    display: inline-block;
}

.menu li {
    margin: 6px 50px 0 0;
    float: left;
    list-style: none;
    font-size: 17px;
}

.nav-secondary-item {
    width: 100%;
}
<div class="dropdown-content" >
	<div class="row">
		<div class="column nav-secondary-category">
			<p class="nav-secondary-label">
				<a href="" class="nav-secondary-link nav-secondary-link-heading">
					<span class="txt txt_bold txt_14">Communications</span>
				</a>
			</p>
			<ul class="nav-secondary-items">
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Content Operations</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Research</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Medical</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Corporate</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Development</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Creative Content</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="column nav-secondary-category">
			<p class="nav-secondary-label">
				<a href="" class="nav-secondary-link nav-secondary-link-heading">
					<span class="txt txt_bold txt_14">Administration</span>
				</a>
			</p>
			<ul class="nav-secondary-items">
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Finance</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Information Technology</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Facilities</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Strategy</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Human Resources</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="column nav-secondary-category">
			<p class="nav-secondary-label">
				<a href="" class="nav-secondary-link nav-secondary-link-heading">
					<span class="txt txt_bold txt_14">Research</span>
				</a>
			</p>
			<ul class="nav-secondary-items">
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Programs</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Partnerships</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Public Policy</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Cohorts</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="column nav-secondary-category">
			<p class="nav-secondary-label">
				<a href="" class="nav-secondary-link nav-secondary-link-heading">
					<span class="txt txt_bold txt_14">Development</span>
				</a>
			</p>
			<ul class="nav-secondary-items">
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Special Events</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Community Events</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">DORA</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Team Fox</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Annual &amp; Planned Giving</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Major and Principle Giving</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">General</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="column nav-secondary-category">
			<p class="nav-secondary-label">
				<a href="" class="nav-secondary-link nav-secondary-link-heading">
					<span class="txt txt_bold txt_14">MDS</span>
				</a>
			</p>
			<ul class="nav-secondary-items">
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Marketing</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Digital Strategy</span>
					</a>
				</li>
				<li class="nav-secondary-item">
					<a href="" class="nav-secondary-link">
						<span class="txt txt_medium txt_19 txt_17Md txt_19Lgp">Direct Marketing and Analytics</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Пожалуйста, помогите нам решить эту проблему с браузером.

Заранее спасибо

...