This is my HTML table on a test page (to be converted to a DIV table layout, but for now, it's just a test):

时间戳

首页 > 解决方案 > vs - what are the advantages and disadvantages of both?

This is my HTML table on a test page (to be converted to a DIV table layout, but for now, it's just a test):

html - vs - what are the advantages and disadvantages of both?

This is my HTML table on a test page (to be converted to a DIV table layout, but for now, it's just a test):

问题描述

This is my HTML table on a test page (to be converted to a DIV table layout, but for now, it's just a test):

  body {
    font-family: Verdana, sans-serif;
    font-size: 12.5px;
    line-height: 14px;
  }
  
  table {
    width: 340px;
    background-color: #ffffff;
    border-collapse: collapse;
    border-width: 2px;
    border-color: #000000;
    border-style: solid;
    color: #000000;
  }
  
  td img {
    height: 80px;
  }
  
  td object {
    height: 130px;
  }
<table>
  <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Flag_of_Manitoba.svg/188px-Flag_of_Manitoba.svg.png"></td>
    <td>
      <h3>Manitoba</h3>
    </td>
    <td>Manitoba is a province of Canada</td>
  </tr>
  <tr>
    <td><object data="https://www.urbansplash.co.uk/images/placeholder-16-9.jpg" type="image/jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/188px-Flag_of_Saskatchewan.svg.png" />
</object>
    </td>
    <td>
      <h3>Saskatchewan</h3>
    </td>
    <td>Saskatchewan borders manitoba</td>
    <td>
      <h3>New tourist destinations</h3>
    </td>
  </tr>
  <tr>
    <td>
      <picture>
        <source media="(min-width: 650px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/650px-Flag_of_Saskatchewan.svg.png">
        <source media="(min-width: 465px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/465px-Flag_of_Saskatchewan.svg.png">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flag_of_Saskatchewan.svg/Flag_of_Saskatchewan.svg.png">
      </picture>
    </td>
    <td>
      <h3>Saskatchewan</h3>
    </td>
    <td>Saskatchewan borders manitoba</td>
    <td>
      <h3>New tourist destinations</h3>
    </td>
  </tr>
</table>

The placeholder image showed instead of the Saskatchewan flag for <object></object> even though I'd defined an image; why is this?

What are the advantages and disadvantages of object or picture tags over just using plain <img>?

Read the state of a checkbox in another method

My WPF app has a MainWindow class with a method called ApplyButton_Click which does a lot of calculation based on input from different boxes and gives the result to an output. Now I wish to take into the account the condition of a CheckBox in those calculation, having checked as the default state of the CheckBox. Part of the xaml code is like this:

<Button x:Name="ApplyButton" Click="ApplyButton_Click" Content="apply" 
   HorizontalAlignment="Left" Margin="300,200,0,0" VerticalAlignment="Top" Width="70" 
   RenderTransformOrigin="0.2,4.0" Height="20"/>

<CheckBox x:Name = "my_checkBox" Content = "check_it" 
   HorizontalAlignment = "Left" Margin = "500,50,0,0" VerticalAlignment = "Top" 
   Width = "90" Checked = "HandleCheck" Unchecked = "HandleCheck"/>

and I my .cs code is as follows:

namespace WpfApp1
{
public partial class MainWindow : Window //, IDisposable
{
    public MainWindow()
    {
     InitializeComponent();
    }

private void HandleCheck_time(object sender, RoutedEventArgs e)
{   
   if(my_checkBox.IsChecked == true) 
   {
       Console.WriteLine("Checkbox check is detected !");
   }

   if(my_checkBox.IsChecked == false) 
   {
       Console.WriteLine("Checkbox uncheck is detected !") ;
   }
}

private void ApplyButton_Click(object sender, RoutedEventArgs e)
{
   bool click_val=(my_checkBox.IsChecked==true); // this is solved.
   if (click_val) 
   {
      Console.WriteLine("... then do a lot of things based on the state of the checkbox"); 
   }
}
}
}

In summary, I need to read the state of checkbox in my ApplyButton_Click method and have the checked state as the default state for the checkbox.

标签： htmlcss

解决方案

您的对象确实指向一个有效的资源，因此它的内部内容不会被渲染。

object { height: 80px }
<p>
  Valid source:<br>
    <object data="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
      <span>I'm inner content</span>
    </object>
</p>
<p>
  Invalid source:<br>
    <object data="foobar">
      <span>I'm inner content</span>
    </object>
</p>

<picture> 元素提供了一种基于媒体查询在各种来源之间进行选择的方法，还提供了一个 <img> 后备功能，适用于不了解 <picture> 的浏览器以及没有活动的 <source> 时.

如果您需要根据媒体查询（例如不同的屏幕尺寸）设置源，则首选 <picture> 元素。
<object> 元素可以加载的不仅仅是图像，而且经常被广告拦截器拦截，因为它们甚至可以加载 HTML 文档，如 iframe。同样，如果您加载 svg 图像，它们将允许访问内部文档（如果来自同源）并且将是交互式的（脚本可以运行，用户事件被传递等），考虑到这些情况，这些可能是优点或缺点. 还有一些怪癖是，当 <object> 的内容不可渲染时（从 DOM 中移除或 CSS 显示为none），UA 预计会移除它的内容。这导致更多的计算。
此外，由于我从未理解的原因，浏览器不会

推荐阅读