小编Mor*_*eus的帖子

乍一看它看起来是非常有用的工具,但我找不到任何类似Save或类似的操作选项.

有谁知道是否可以保存Chrome的Coverage工具分析的结果？谢谢

我正在玩CSS网格布局,并遇到了一个我无法找到答案的问题.

请考虑以下示例:

:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
  grid-column-gap: var(--column-gap);
  grid-row-gap: var(--row-gap);
  justify-content: center;		
} 

[class*=l-] {
  border: 1px solid red;
}

.l-1 {
  grid-column-start: span 1;		
}

.l-2 {
  grid-column-start: span 2;
}

.l-3 {
  grid-column-start: span 3;
}

.l-4 {
  grid-column-start: span 4;
}

.l-5 {
  grid-column-start: span 5;
}

.l-6 {
  grid-column-start: span 6;
}

.l-7 {
  grid-column-start: span 7;
}

.l-8 {
  grid-column-start: span …

无法找到解决方案.基本上,我想要实现的是position: sticky如果有更多内容然后浏览器高度,则有一个带滚动条的元素.

我不想使用,position: fixed因为它会增加颈部的额外疼痛.

以下是我希望它如何工作的示例:

.placeholder {
  height: 200vh;
  width: 50%;
  float: right;
}

.child {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="placeholder"></div>
  <div class="child">
    some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text …

我似乎无法摆脱浏览器中select元素的边框(轮廓,框阴影？)Opera.

以下规则均未删除边框:

select {
  /*border: 0;*/
  border: none;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

<select class="form-control">
  <option selected="selected" value="0">Most Popular</option>
  <option value="1">A-Z</option>
  <option value="2">Z-A</option>
  <option value="3">Lowest price</option>
  <option value="4">Highest price</option>
</select>

Opera 版本是46.0.2597.57(PGO).

以上代码在其他测试的浏览器中运行良好 - Chrome,Firefox,Internet Explorer和Edge.

任何提示都会有所帮助.

编辑我使用的是Windows 10 64位,这是一个截图:

无法在网络上找到答案,所以在这里发布问题.

我想要实现的目标:

当用户滚动到页面的最底部时,获取最新的动态加载元素的最低值,并使用它来确定是否需要加载另一个元素.

数学很简单:

if (element.getBoundingClientRect().bottom <= window.innerHeight)
   loadAnotherElement();

window.innerHeight是955px

问题:

在初始加载时,第一个元素的底部值是905px正常的,并触发函数加载另一个,但是在第二个加载后,底部值1389px将永远不会触发该loadAnotherElement函数.

我无法发布完整的代码,因为它太复杂,所以希望上面的内容足以理解.

编辑

管理以创建适当的测试用例

我有带有此标记的表格：

<tr id="main_nav">
    <td style="width: 100%" colspan="2">
        <a>Link1</a>
        <a>Link2</a>
        <a>Link3</a>                            
    </td>
</tr>

我需要为这些链接设置填充，但我无法让它工作...... CSS：

#main_nav a {
    color: #fff;
    font-weight: bold;  
    padding-left: 1em;
}

我尝试过的：将链接包装到 p 标签、span 标签、添加 css 显示块、显示表、添加带有填充的样式到链接。不能用<td>标签包装每个链接！

编辑：尝试了边距而不是填充，没有运气。

有谁知道解决方法？

我正在尝试计算 div 的宽度：

#container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: none;
    background: #fff;
    width: calc(100% - 1em);
    padding: .5em;
}    

我有一个简单的方法来从网站发送电子邮件:

... // local vars
using (var mail = new MailMessage(from, sendTo))
{
    using (var smtp = new SmtpClient())
    {
        mail.CC.Add(cc);
        mail.Bcc.Add(bcc.Replace(";", ","));
        mail.Subject = subject;
        mail.Body = body;
        mail.IsBodyHtml = html == -1;
        mail.Priority = priority;
        mail.BodyEncoding = mail.SubjectEncoding = mail.HeadersEncoding = Encoding.UTF8;                    

        smtp.DeliveryMethod = SmtpDeliveryMethod.PickupDirectoryFromIis;

        try
        {
            if (mail.Body.IsNotEmpty())
            {               
                smtp.Send(mail);                
            }
        }
        catch
        {
            smtp.DeliveryMethod = SmtpDeliveryMethod.Network;

            try
            {
                if (mail.Body.IsNotEmpty())
                {                   
                    smtp.Send(mail);                    
                }
            }
            catch(Exception e)
            {               
                // I log the error here
            }
        }
    } …

我正在创建一个下拉菜单。到目前为止一切都很好，但是我想显示一个悬停的下拉列表。但是我不知道为什么我的CSS无法正常工作。

这是我的代码：

.dropbtn {
  background-color: red;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button> …

它看起来像一个简单的任务,但无法使其正常工作.我需要为平板电脑重新订购div,这是100%的宽度.请看下面的小提琴,看看我的意思.

原始参考:

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

http://getbootstrap.com/css/#grid-column-ordering

正如我在标题中提到的那样 - chrome并未接受媒体查询.例如:

@media only screen and (min-width: 481px) and (max-width: 784px)
@media (min-width: 481px) and (max-width: 784px)

如果我只留下一个宽度属性,它可以工作:

@media only screen and (min-width: 481px)

所有其他浏览器都可以选择.你有没有人也来过这个问题,可以帮助我走上正轨吗？

编辑

我使用的是最新版本的chrome(版本32.0.1700.76 m)