Блог

Главная - Вопросы по программированию - Строка не распространяется на содержимое в Safari

Строка не распространяется на содержимое в Safari

#javascript #html #css #bootstrap-4 #safari

#javascript #HTML #css #bootstrap-4 #сафари #safari

Вопрос:

Работаю над личным проектом и сталкиваюсь с небольшой проблемой совместимости с Safari, средняя карта отображается в правильном положении, но с фиксированным размером. В Chrome она будет соответствующим образом масштабироваться в соответствии с содержимым, но в Safari она будет перетекать без растягивания тела карты вообще.

Действительно рву на себе волосы на этом, был бы признателен за любую информацию.

 /* Links */

a,
a:focus,
a:hover {
  color: #fff;
}


/* Custom default button */

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none;
  /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height: 100%;
  background-color: #5B4562;
}

.text-highlight {
  color: mediumpurple;
  font-weight: 450;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  color: #fff;
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 52rem;
}


/*
 * Header
 */

.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-link:hover,
.nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link .nav-link {
  margin-left: 1rem;
}

a.nav-link {
  color: inherit;
  text-decoration: none;
}

.active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 1.5rem;
}

.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}

.row:before,
.row:after {
  display: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div className="cover-container d-flex h-100 p-3 mx-auto flex-column">
    <header className="masthead mb-auto">
      <div className="inner">
        <a href="/"></a>
        <nav className="nav nav-masthead justify-content-center">
          <a>Link Examples</a>
        </nav>
      </div>
    </header>
    <br/>

    <div className="row">
      <div className="card col-lg-11 ml-5 mr-5 text-dark">
        <div className="card-body">
          <h1 className="display-4">Universal</h1>
          <p className="lead card-text">
            Lots of long text would go here to cause issues!</p>
          <p className="lead">
            <a href="/buy" className="btn btn-lg btn-dark">Purchase Button</a>
          </p>
        </div>
      </div>
    </div>
    <br/>

    <footer className="mastfoot mt-auto text-white">
      <div className="inner">
        <p>amp;copy; Footer</p>
      </div>
    </footer>
  </div>

Комментарии:

1. Для меня ваш пример выглядит одинаково как в Chrome, так и в Safari.

2. Следует отметить, что проблемы, которые я наблюдал, были связаны с мобильной версией safari.

3. Удалите h-100 из cover-container и вместо этого используйте min-height: 100% . Safari, похоже, предотвращает рост контейнера выше 100% высоты, в отличие от Chrome. Я не тестировал мобильные устройства, но это исправляет это в macOS Safari

4. Ах, теперь все решено — вы хотите опубликовать ответ, чтобы я мог разрешить его и пометить как решение?