个人中心
gpt4 book ai didi

html - Flex 元素不会在 Webkit 浏览器中显示

转载 作者：搜寻专家 更新时间：2023-10-31 23:20:07 25 4
gpt4 key购买 nike

<分区>

我创建了一个带有小齿轮的文本字段，它在弹出菜单中提供了有关如何处理搜索字符串的选项。对于某些部分，它使用灵活的盒子布局。

在 Firefox 中，我得到了预期的结果:
Mozilla result .

在 Webkit 浏览器(Safari 和 Vivaldi)中，我得到这个结果: Webkit result

如您所见，齿轮并没有保持在一条直线上。这是我主要关心的问题。我不太担心菜单文本不会拉伸(stretch)，因为可以通过给它的任何容器一个宽度来轻松解决这个问题。

我目前没有 Chrome，但我怀疑它可能会以与其他 Webkit 浏览器类似的方式呈现它。

这是我认为与我的问题相关的 css。

.flex-search {
  position: relative;
  display: -webkit-flex; // <--
  display: flex; // <--
  -webkit-align-items: stretch; // <--
  align-items: stretch; // <--
  width: 100%;
  border: 1px solid #222;
  border-radius: .4em;
  background-color: #fff;
}
.flex-search > :first-child {
  -webkit-flex: 1; // <--
  flex: 1; // <--
}
.flex-search > :last-child {
  width: 2em; // <--
  border-left: 1px solid #ccc;
  cursor: pointer;
}

下面是搜索字段的完整代码片段:

$( '.flex-search input[type="radio"]' ).click( function() {
  $( this ).closest( 'span' )
    .css( 'display', 'none' )
    .delay( 500 )
    .queue( function ( next ) {
    $( this ).removeAttr( 'style' );
    next();
  } );
  $( this ).closest( 'fieldset' )
    .find( 'input[type="text"]' )
    .attr( 'placeholder', $( this ).closest( 'label' ).text() )
    .focus();
} );
* {
  margin: 0;
  padding: 0;
  border: medium none;
  border-spacing: 0;
  outline: none;
  outline: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  text-indent: 0;
  list-style: none outside none;
  background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
  border: 0;
  padding: 0;
}

html {
  color: #222;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  text-align: left;
  height: 100%;
}

body {
  font-size: 1.4rem;
  line-height: 1.5em;
  min-height: 100%;
  background-color: #fff;
}

div {
  margin: 150px auto 0;
  width: 300px;
}

::-webkit-input-placeholder {
  color: #666;
  font-size: 85%;
}
:-moz-placeholder {
  color: #666;
  font-size: 85%;
}
::-moz-placeholder {
  color: #666;
  font-size: 85%;
}
:-ms-input-placeholder {
  color: #666;
  font-size: 85%;
}
:focus::-webkit-input-placeholder {
  color: #ccc;
}
:focus:-moz-placeholder {
  color: #ccc;
}
:focus::-moz-placeholder {
  color: #ccc;
}
:focus:-ms-input-placeholder {
  color: #ccc;
}

.flex-search {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: stretch;
  align-items: stretch;
  width: 100%;
  border: 1px solid #222;
  border-radius: .4em;
  background-color: #fff;
}
.flex-search > :first-child {
  -webkit-flex: 1;
  flex: 1;
}
.flex-search > :last-child {
  width: 2em;
  border-left: 1px solid #ccc;
  cursor: pointer;
}

.flex-search > :last-child:after {
  content: '\00a0';
  display: block;
  width: 100%;
  height: 100%;
  background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==' ) no-repeat center center;
  opacity: 0.5;
}
.flex-search > :last-child:hover:after {
  opacity: 1;
}
.flex-search > :last-child > :first-child {
  position: absolute;
  right: -1px;
  bottom: 0;
  display: none;
  padding: 0 .25em 2.1em 0;
  color: #fff;
}
.flex-search > :last-child:hover > :first-child {
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flex-search label {
  display: block;
  cursor: pointer;
  background-color: #ccc;
}
.flex-search label > span {
  position: relative;
  display: block;
  font-size: 85%;
  text-align: right;
  padding: .2em .8em .2em 30%;
}
.flex-search label:hover > span,
.flex-search input[type="radio"]:checked ~ span {
  color: #999;
  background-color: #eee;
}
.flex-search input[type="radio"]:checked ~ span:before {
  position: absolute;
  left: .7em;
  content: '✔';
}
.flex-search input[type="radio"] {
  display: none;
}

.flex-search input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: .2em .8em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <fieldset class="flex-search">
    <span>
      <input type="text" name="id" placeholder="contains">
    </span>
    <span>
      <span>
        <label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
        <label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
        <label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
        <label><input type="radio" name="t-id" value="i"><span>equals</span></label>
      </span>
    </span>
  </fieldset>
</div>

您是否知道为什么我在 Webkit 浏览器中没有得到预期的结果以及如何让它在其中工作？

我怀疑我的代码实际上可能比它需要的更复杂。如果您有关于如何简化的建议，当然也非常感谢，但我主要关注如何使当前代码在 Webkit 浏览器中工作。

25 4 0
文章推荐： php - Woocommerce 最近浏览过的产品 Wordpress
文章推荐： node.js - 谷歌日历推送通知 : Unauthorized webhook call
文章推荐： PHPWord - 我可以在一个表格单元格中连接多种字体样式吗？
文章推荐： javascript - 如何将 Angular 2 App 部署到 Github Pages？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com